diff --git a/src/servlet/education/EducationLoadServlet.java b/src/servlet/education/EducationLoadServlet.java
index baa89e6829b26eb482a2f2e4466c5943cf3ac261..9c6a0bfb0d20089a80829e2df02c6063118f502f 100644
--- a/src/servlet/education/EducationLoadServlet.java
+++ b/src/servlet/education/EducationLoadServlet.java
@@ -58,8 +58,8 @@ public class EducationLoadServlet extends HttpServlet {
             String school = req.getParameter("school");
             String major = req.getParameter("major");
             String degree = req.getParameter("degree");
-            String start = req.getParameter("starttime");
-            String end = req.getParameter("endtime");
+            String startTime = req.getParameter("starttime");
+            String endTime = req.getParameter("endtime");
             String maincourse = req.getParameter("maincourse");
             Education edu = new Education();
             System.out.println("main course " + maincourse);
@@ -67,9 +67,20 @@ public class EducationLoadServlet extends HttpServlet {
             edu.setSchool(school);
             edu.setMajor(major);
             edu.setDegree(degree);
-            edu.setEnrollmenttime(StringUtils.stringToDate(start));
-            edu.setGraduationtime(StringUtils.stringToDate(end));
             edu.setMaincourse(maincourse);
+            if (startTime.equals("") && !endTime.equals("")){
+                edu.setEnrollmenttime(StringUtils.stringToDate("9999-12-31"));
+                edu.setGraduationtime(StringUtils.stringToDate(endTime));
+            }else if (!startTime.equals("") && endTime.equals("")){
+                edu.setEnrollmenttime(StringUtils.stringToDate(startTime));
+                edu.setGraduationtime(StringUtils.stringToDate("9999-12-31"));
+            }else if (!startTime.equals("") && !endTime.equals("")){
+                edu.setEnrollmenttime(StringUtils.stringToDate(startTime));
+                edu.setGraduationtime(StringUtils.stringToDate(endTime));
+            }else if (startTime.equals("") && endTime.equals("")){
+                edu.setEnrollmenttime(StringUtils.stringToDate("9999-12-31"));
+                edu.setGraduationtime(StringUtils.stringToDate("9999-12-31"));
+            }
             int res = educationDAO.addEducation(edu);
             System.out.println(res);
             if(res == -1000000000){
@@ -99,8 +110,8 @@ public class EducationLoadServlet extends HttpServlet {
             String school = req.getParameter("school");
             String degree = req.getParameter("degree");
             String major = req.getParameter("major");
-            Date starttime = StringUtils.stringToDate(req.getParameter("starttime"));
-            Date endtime = StringUtils.stringToDate(req.getParameter("endtime"));
+            String startTime = req.getParameter("starttime");
+            String endTime = req.getParameter("endtime");
             String course = req.getParameter("course");
 
             Education edu = new Education();
@@ -108,10 +119,22 @@ public class EducationLoadServlet extends HttpServlet {
             edu.setSchool(school);
             edu.setDegree(degree);
             edu.setMajor(major);
-            edu.setEnrollmenttime(starttime);
-            edu.setGraduationtime(endtime);
             edu.setMaincourse(course);
 
+            if (startTime.equals("") && !endTime.equals("")){
+                edu.setEnrollmenttime(StringUtils.stringToDate("9999-12-31"));
+                edu.setGraduationtime(StringUtils.stringToDate(endTime));
+            }else if (!startTime.equals("") && endTime.equals("")){
+                edu.setEnrollmenttime(StringUtils.stringToDate(startTime));
+                edu.setGraduationtime(StringUtils.stringToDate("9999-12-31"));
+            }else if (!startTime.equals("") && !endTime.equals("")){
+                edu.setEnrollmenttime(StringUtils.stringToDate(startTime));
+                edu.setGraduationtime(StringUtils.stringToDate(endTime));
+            }else if (startTime.equals("") && endTime.equals("")){
+                edu.setEnrollmenttime(StringUtils.stringToDate("9999-12-31"));
+                edu.setGraduationtime(StringUtils.stringToDate("9999-12-31"));
+            }
+
             int res = educationDAO.editEdu(edu);
             if(res == -1){
                 resp.getWriter().print("failed");
diff --git a/src/servlet/experience/ExpServlet.java b/src/servlet/experience/ExpServlet.java
index bff96c521dbad641f4f5570fb935457d9da22d8e..7a389d81d3e5d004e8553d2ba69f2c1a322487f1 100644
--- a/src/servlet/experience/ExpServlet.java
+++ b/src/servlet/experience/ExpServlet.java
@@ -27,11 +27,10 @@ public class ExpServlet extends HttpServlet {
             String jobname = req.getParameter("jobname");
             String companyname = req.getParameter("company");
             String workdescription = req.getParameter("desc");
-            String starttime = req.getParameter("start");
-            String endtime = req.getParameter("end");
-            System.out.println(jobname);
-            System.out.println(companyname);
-            System.out.println(starttime);
+            String startTime = req.getParameter("start");
+            String endTime = req.getParameter("end");
+            System.out.println(startTime);
+            System.out.println(endTime);
 
             ExperienceDAOImpl expImpl = new ExperienceDAOImpl();
 
@@ -39,9 +38,21 @@ public class ExpServlet extends HttpServlet {
             e.setUserid(userId);
             e.setJobname(jobname);
             e.setCompany(companyname);
-            e.setStarttime(StringUtils.stringToDate(starttime));
-            e.setEndtime(StringUtils.stringToDate(endtime));
             e.setWorkdescription(workdescription);
+
+            if (startTime.equals("") && !endTime.equals("")){
+                e.setStarttime(StringUtils.stringToDate("9999-12-31"));
+                e.setEndtime(StringUtils.stringToDate(endTime));
+            }else if (!startTime.equals("") && endTime.equals("")){
+                e.setStarttime(StringUtils.stringToDate(startTime));
+                e.setEndtime(StringUtils.stringToDate("9999-12-31"));
+            }else if (!startTime.equals("") && !endTime.equals("")){
+                e.setStarttime(StringUtils.stringToDate(startTime));
+                e.setEndtime(StringUtils.stringToDate(endTime));
+            }else if (startTime.equals("") && endTime.equals("")){
+                e.setStarttime(StringUtils.stringToDate("9999-12-31"));
+                e.setEndtime(StringUtils.stringToDate("9999-12-31"));
+            }
             System.out.println("start process");
 
             int res = expImpl.addExperience(e);
diff --git a/src/servlet/experience/ExpUpdateServlet.java b/src/servlet/experience/ExpUpdateServlet.java
index e924241f575e6572534eb78aec1617fb7d01603b..dc254de5ea0f5e555e546ee65e6672670063d3b4 100644
--- a/src/servlet/experience/ExpUpdateServlet.java
+++ b/src/servlet/experience/ExpUpdateServlet.java
@@ -48,18 +48,30 @@ public class ExpUpdateServlet extends HttpServlet {
             int expid = Integer.parseInt(req.getParameter("expid"));
             String company = req.getParameter("company");
             String job = req.getParameter("job");
-            Date starttime = StringUtils.stringToDate(req.getParameter("starttime"));
-            Date endtime = StringUtils.stringToDate(req.getParameter("endtime"));
+            String startTime = req.getParameter("starttime");
+            String endTime = req.getParameter("endtime");
             String des = req.getParameter("des");
 
             Experience exp = new Experience();
             exp.setWorkid(expid);
             exp.setCompany(company);
             exp.setJobname(job);
-            exp.setStarttime(starttime);
-            exp.setEndtime(endtime);
             exp.setWorkdescription(des);
 
+            if (startTime.equals("") && !endTime.equals("")){
+                exp.setStarttime(StringUtils.stringToDate("9999-12-31"));
+                exp.setEndtime(StringUtils.stringToDate(endTime));
+            }else if (!startTime.equals("") && endTime.equals("")){
+                exp.setStarttime(StringUtils.stringToDate(startTime));
+                exp.setEndtime(StringUtils.stringToDate("9999-12-31"));
+            }else if (!startTime.equals("") && !endTime.equals("")){
+                exp.setStarttime(StringUtils.stringToDate(startTime));
+                exp.setEndtime(StringUtils.stringToDate(endTime));
+            }else if (startTime.equals("") && endTime.equals("")){
+                exp.setStarttime(StringUtils.stringToDate("9999-12-31"));
+                exp.setEndtime(StringUtils.stringToDate("9999-12-31"));
+            }
+
 
             int res = eDao.editExp(exp);
             if(res == -1){
diff --git a/src/servlet/experience/ExperienceShowServlet.java b/src/servlet/experience/ExperienceShowServlet.java
index 0d88c332bffd58f154daf26b5a62a82cfef0e5f8..fddc64984e772a9f889cbb98ef7c1d1844a0195d 100644
--- a/src/servlet/experience/ExperienceShowServlet.java
+++ b/src/servlet/experience/ExperienceShowServlet.java
@@ -31,7 +31,6 @@ public class ExperienceShowServlet extends HttpServlet {
           Experience e= list.get(i);
           e.setStr_starttime(StringUtils.dateToString(e.getStarttime()));
           e.setStr_endtime(StringUtils.dateToString(e.getEndtime()));
-
       }
       String json = JSONArray.fromObject(list).toString();
       System.out.println(json);
diff --git a/src/servlet/project/AddServlet.java b/src/servlet/project/AddServlet.java
index a87b655be20c0c3996dec87542029762117f64ae..e7168c1a02afe843eabbe1b72f77f0b42790a0bb 100644
--- a/src/servlet/project/AddServlet.java
+++ b/src/servlet/project/AddServlet.java
@@ -25,34 +25,25 @@ public class AddServlet extends HttpServlet {
         String projectName = request.getParameter("title");
         String description = request.getParameter("description");
         String content = request.getParameter("content");
-        Date startTime = StringUtils.stringToDate(request.getParameter("starttime"));
-        Date endTime = StringUtils.stringToDate(request.getParameter("endtime"));
+        String startTime = request.getParameter("starttime");
+        String endTime = request.getParameter("endtime");
         String projectimg = request.getParameter("img");
         String projectvideo = request.getParameter("vedio");
         String document = request.getParameter("otherfile");
         String tag = request.getParameter("tag");
         int visibility = Integer.parseInt(request.getParameter("visibility"));
 
-        System.out.println("1 " + userId);
-        System.out.println("2 " + projectName);
-        System.out.println("3 " + description);
-        System.out.println("4 " + content);
+//        System.out.println("1 " + userId);
+//        System.out.println("2 " + projectName);
+//        System.out.println("3 " + description);
+//        System.out.println("4 " + content);
         System.out.println("5 " + startTime);
         System.out.println("6 " + endTime);
-        System.out.println("7 " + projectimg);
-        System.out.println("8 " + projectvideo);
-        System.out.println("9 " + document);
-        System.out.println("10 " + tag);
-        System.out.println("11 " + visibility);
-
-        String strDate  = "9999-12-31";
-        SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd");
-        Date dateTime = null;
-        try {
-            dateTime = formatter.parse(strDate);
-        } catch (ParseException e) {
-            e.printStackTrace();
-        }
+//        System.out.println("7 " + projectimg);
+//        System.out.println("8 " + projectvideo);
+//        System.out.println("9 " + document);
+//        System.out.println("10 " + tag);
+//        System.out.println("11 " + visibility);
 
 
         Project p = new Project();
@@ -60,14 +51,27 @@ public class AddServlet extends HttpServlet {
         p.setProjectname(projectName);
         p.setProjectdescription(description);
         p.setContent(content);
-        p.setStarttime(dateTime);
-        p.setEndtime(dateTime);
         p.setProjectimg(projectimg);
         p.setProjectvideo(projectvideo);
         p.setDocument(document);
         p.setVisibility(visibility);
         p.setVisibleto("");
+        if (startTime.equals("") && !endTime.equals("")){
+            p.setStarttime(StringUtils.stringToDate("9999-12-31"));
+            p.setEndtime(StringUtils.stringToDate(endTime));
+        }else if (!startTime.equals("") && endTime.equals("")){
+            p.setStarttime(StringUtils.stringToDate(startTime));
+            p.setEndtime(StringUtils.stringToDate("9999-12-31"));
+        }else if (!startTime.equals("") && !endTime.equals("")){
+            p.setStarttime(StringUtils.stringToDate(startTime));
+            p.setEndtime(StringUtils.stringToDate(endTime));
+        }else if (startTime.equals("") && endTime.equals("")){
+            p.setStarttime(StringUtils.stringToDate("9999-12-31"));
+            p.setEndtime(StringUtils.stringToDate("9999-12-31"));
+        }
+
         if (tag.equals("")){
+//            System.out.println("no tag project");
             ProjectDAOImpl projectDao = new ProjectDAOImpl();
             int res = projectDao.addProject(p);
             if(res == 1){
@@ -81,9 +85,9 @@ public class AddServlet extends HttpServlet {
             int res = projectDao.addProject(p);
             int res2 = 0;
             if(res == 1){
-                System.out.println("acquire project id");
+//                System.out.println("acquire project id");
                 Project result = projectDao.getSpecificProject(userId, projectName);
-                System.out.println("project id is");
+//                System.out.println("project id is");
                 int projectId = result.getProjectid();
                 System.out.println(projectId);
                 for (int i = 0; i < tagList.length; i ++){
diff --git a/src/servlet/project/EditServlet.java b/src/servlet/project/EditServlet.java
index 41ab20bf0dd9cab6102468f57b44833843ff6245..62783c9342f486863d148e281882f21ccae87141 100644
--- a/src/servlet/project/EditServlet.java
+++ b/src/servlet/project/EditServlet.java
@@ -33,35 +33,35 @@ public class EditServlet extends HttpServlet {
         String projectName = request.getParameter("title");
         String description = request.getParameter("description");
         String content = request.getParameter("content");
-        Date startTime = StringUtils.stringToDate(request.getParameter("starttime"));
-        Date endTime = StringUtils.stringToDate(request.getParameter("endtime"));
+        String startTime = request.getParameter("starttime");
+        String endTime = request.getParameter("endtime");
         String projectimg = request.getParameter("img");
         String projectvideo = request.getParameter("vedio");
         String document = request.getParameter("otherfile");
         String tag = request.getParameter("tag");
         int visibility = Integer.parseInt(request.getParameter("visibility"));
 
-        System.out.println("1 " + userId);
-        System.out.println("2 " + projectName);
-        System.out.println("3 " + description);
-        System.out.println("4 " + content);
+//        System.out.println("1 " + userId);
+//        System.out.println("2 " + projectName);
+//        System.out.println("3 " + description);
+//        System.out.println("4 " + content);
         System.out.println("5 " + startTime);
         System.out.println("6 " + endTime);
-        System.out.println("7 " + projectimg);
-        System.out.println("8 " + projectvideo);
-        System.out.println("9 " + document);
-        System.out.println("10 " + tag);
-        System.out.println("11 " +projectId);
-        System.out.println("12 " + visibility);
-
-        String strDate  = "9999-12-31";
-        SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd");
-        Date dateTime = null;
-        try {
-            dateTime = formatter.parse(strDate);
-        } catch (ParseException e) {
-            e.printStackTrace();
-        }
+//        System.out.println("7 " + projectimg);
+//        System.out.println("8 " + projectvideo);
+//        System.out.println("9 " + document);
+//        System.out.println("10 " + tag);
+//        System.out.println("11 " +projectId);
+//        System.out.println("12 " + visibility);
+
+//        String strDate  = "9999-12-31";
+//        SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd");
+//        Date dateTime = null;
+//        try {
+//            dateTime = formatter.parse(strDate);
+//        } catch (ParseException e) {
+//            e.printStackTrace();
+//        }
 
 
         ProjectDAOImpl read = new ProjectDAOImpl();
@@ -77,15 +77,28 @@ public class EditServlet extends HttpServlet {
         p.setProjectname(projectName);
         p.setProjectdescription(description);
         p.setContent(content);
-        p.setStarttime(dateTime);
-        p.setEndtime(dateTime);
         p.setProjectimg(newImg);
         p.setProjectvideo(newVideo);
         p.setDocument(newDoc);
         p.setVisibility(visibility);
         p.setVisibleto("");
         p.setProjectid(projectId);
+        if (startTime.equals("") && !endTime.equals("")){
+            p.setStarttime(StringUtils.stringToDate("9999-12-31"));
+            p.setEndtime(StringUtils.stringToDate(endTime));
+        }else if (!startTime.equals("") && endTime.equals("")){
+            p.setStarttime(StringUtils.stringToDate(startTime));
+            p.setEndtime(StringUtils.stringToDate("9999-12-31"));
+        }else if (!startTime.equals("") && !endTime.equals("")){
+            p.setStarttime(StringUtils.stringToDate(startTime));
+            p.setEndtime(StringUtils.stringToDate(endTime));
+        }else if (startTime.equals("") && endTime.equals("")){
+            p.setStarttime(StringUtils.stringToDate("9999-12-31"));
+            p.setEndtime(StringUtils.stringToDate("9999-12-31"));
+        }
+
         if (tag.equals("")){
+            System.out.println("no tag project");
             ProjectDAOImpl projectDao = new ProjectDAOImpl();
             int res = projectDao.updateAProject(p);
             if(res == 1){
@@ -94,6 +107,7 @@ public class EditServlet extends HttpServlet {
                 response.getWriter().print("failed");
             }
         }else{
+            System.out.println(tag);
             String[] tagList = tag.split(";;;");
             ProjectDAOImpl projectDao = new ProjectDAOImpl();
             int res = projectDao.updateAProject(p);
diff --git a/web/css/Editor/timebar.css b/web/css/Editor/timebar.css
new file mode 100644
index 0000000000000000000000000000000000000000..e7f305eb1b122622adc165bcfeb5b54ef4d2b5c9
--- /dev/null
+++ b/web/css/Editor/timebar.css
@@ -0,0 +1,14 @@
+.timebar {
+    border: 1px solid #e0e0e0;
+    padding: 5px 8px;
+    color: #616161;
+    width: 100%;
+    font-size: 0.85em;
+    font-weight: 300;
+    height: 40px;
+    -webkit-appearance: none;
+    outline: none;
+    font-family: 'Muli-Regular';
+    background: none;
+    box-shadow:none !important;
+}
\ No newline at end of file
diff --git a/web/js/Award/awards_admin.js b/web/js/Award/awards_admin.js
index c9d222cd84c68f7979c30ff8b2dbe6355d3df9df..3cca2c134c05c62e0064109fb6ec856e6c2c77ee 100644
--- a/web/js/Award/awards_admin.js
+++ b/web/js/Award/awards_admin.js
@@ -2,6 +2,14 @@ $(function() {
     // 填充
     getAwards();
 
+    $('#time').datepicker({
+        autoclose: true,
+        clearBtn: true,
+        todayBtn: true,
+        todayHighlight: true,
+        format: 'yyyy-mm-dd'
+    });
+
 });
 
 function getAwards(){
@@ -28,18 +36,14 @@ function getAwards(){
                     item = item+1;
                     loadAward(data[x], item);
                 }
-
-                var awardD = document.getElementsByName("edit_awardTime");
-                for(var i = 0 ; i < awardD.length; i ++){
-                        awardD[i].datepicker({
-                            autoclose: true,
-                            clearBtn: true,
-                            todayBtn: true,
-                            todayHighlight: true,
-                            format: 'yyyy-mm-dd'
-                        });
-
-                }
+                console.log($('.awardDate input'));
+                $('.awardDate input').datepicker({
+                    autoclose: true,
+                    clearBtn: true,
+                    todayBtn: true,
+                    todayHighlight: true,
+                    format: 'yyyy-mm-dd'
+                });
 
             }
         },
@@ -66,7 +70,9 @@ function loadAward(data, item){
         '                                    <div class="form-group">\n' +
         '                                        <label class="col-sm-2 control-label">Issuing Dates</label>\n' +
         '                                        <div class="col-sm-8">\n' +
-        '                                            <input type="text" class="form-control1" placeholder="yyyy-mm-dd" name="edit_awardTime" value="' + data.str_awardtime + '">\n' +
+        '                                            <div class="awardDate">' +
+        '                                               <input type="text" class="form-control1" placeholder="yyyy-mm-dd" name="edit_awardTime" value="' + data.str_awardtime + '">\n' +
+        '                                            </div>\n'+
         '                                        </div>\n' +
         '                                    </div>\n' +
         '\n' +
diff --git a/web/js/Experience/admin-background.js b/web/js/Experience/admin-background.js
index 2dc41c0be8777b25eb1c6f141d4d22c05b5fec6f..27d624b0c63719a46fcbe45f3768a3498e545b6c 100644
--- a/web/js/Experience/admin-background.js
+++ b/web/js/Experience/admin-background.js
@@ -42,6 +42,13 @@ function fillExperienceInfo() {
                 loadExperience(data[x],count);
                 count ++;
             }
+            $('.input-daterange input').datepicker({
+                autoclose: true,
+                clearBtn: true,
+                todayBtn: true,
+                todayHighlight: true,
+                format: 'yyyy-mm-dd'
+            });
         },
         error : function(msg) {
             alert("failed to get experience");
@@ -66,6 +73,13 @@ function fillEducationInfo(){
                 loadEducation(data[x],count);
                 count ++;
             }
+            $('.input-daterange input').datepicker({
+                autoclose: true,
+                clearBtn: true,
+                todayBtn: true,
+                todayHighlight: true,
+                format: 'yyyy-mm-dd'
+            });
         },
         error : function(msg) {
             alert("failed");
@@ -75,6 +89,7 @@ function fillEducationInfo(){
 }
 
 function loadExperience(experience_data, count) {
+    console.log(experience_data)
 
     $('#experience-show').append('<span>Work Experience Item '+ count +'</span>\n' +
         '                    <button class="delete" onclick="expDeleteConfirm('+experience_data.workid+')">Delete</button>\n' +
@@ -98,7 +113,11 @@ function loadExperience(experience_data, count) {
         '                            <div class="form-group">\n' +
         '                                <label class="col-sm-2 control-label">Work Period</label>\n' +
         '                                <div class="col-sm-8">\n' +
-        '                                    <input name="expperiod" type="text" class="form-control1" placeholder="DD/MM/Year" value="'+experience_data.str_starttime +'  -  '+ experience_data.str_endtime+'">\n' +
+        '                                   <div class="input-group input-daterange">\n' +
+        '                                       <input name="work_start_show" type="text" placeholder="DD-MM-Year" data-date-format="yyyy-mm-dd" class="form-control1" style="background-color: #fff" value="'+ experience_data.str_starttime +'"/>\n' +
+        '                                       <div class="input-group-addon">To</div>\n' +
+        '                                       <input name="work_end_show" type="text" placeholder="DD-MM-Year" data-date-format="yyyy-mm-dd" class="form-control1" style="background-color: #fff" value="'+ experience_data.str_endtime +'"/>\n' +
+        '                                   </div>' +
         '                                </div>\n' +
         '                            </div>\n' +
         '\n' +
@@ -148,7 +167,11 @@ function loadEducation(education, count){
         '                            <div class="form-group">\n' +
         '                                <label class="col-sm-2 control-label">Graduation Date</label>\n' +
         '                                <div class="col-sm-8">\n' +
-        '                                    <input name="eduperiod" type="text" class="form-control1" placeholder="DD/MM/Year" value="'+ education.str_starttime +'  -  '+ education.str_endtime +'">\n' +
+        '                                   <div class="input-group input-daterange">\n' +
+        '                                       <input name="edu_start_show" type="text" placeholder="DD-MM-Year" data-date-format="yyyy-mm-dd" class="form-control1" style="background-color: #fff" value="'+ education.str_starttime +'"/>\n' +
+        '                                       <div class="input-group-addon">To</div>\n' +
+        '                                       <input name="edu_end_show" type="text" placeholder="DD-MM-Year" data-date-format="yyyy-mm-dd" class="form-control1" style="background-color: #fff" value="'+ education.str_endtime +'"/>\n' +
+        '                                      </div>' +
         '                                </div>\n' +
         '                            </div>\n' +
         '\n' +
@@ -168,11 +191,9 @@ function addNewEdu(){
     var sel = document.getElementById("degree");
     var degree = sel.value;
     var major = $('#major').val();
-    var studyTime = $('#studyPeriod').val();
     var maincourse = document.getElementById("maincourse").value;
-    var period = studyTime.split(" - ");
-    var starttime = period[0];
-    var endtime = period[1];
+    var starttime = $('#edu_start').val();
+    var endtime = $('#edu_end').val();
 
     $.ajax({
         type: 'post',
@@ -202,11 +223,9 @@ function addNewWork(){
 
     var company = $('#company').val();
     var jobname = $('#jobname').val();
-    var period = $('#workPeriod').val();
     var desc = document.getElementById("workDesc").value;
-    var time = period.split(" - ");
-    var start = time[0];
-    var end = time[1];
+    var start = $('#work_start').val();
+    var end = $('#work_end').val();
 
     $.ajax({
         type: 'post',
@@ -329,13 +348,12 @@ function editExps(){
     var company = document.getElementsByName("expcompany");
     var edit_expid = document.getElementsByName("edit_expid");
     var job = document.getElementsByName("expjob");
-    var period = document.getElementsByName("expperiod");
     var des = document.getElementsByName("expdes");
+    var starttime = document.getElementsByName("work_start_show");
+    var endtime = document.getElementsByName("work_end_show");
     var n = company.length;
     var count = 0;
     for(i=0; i<n; i++){
-        var starttime = period[i].value.split("  -  ")[0];
-        var endtime = period[i].value.split("  -  ")[1];
         $.ajax({
             type: 'post',
             url: '/exp.servlet.update',
@@ -345,8 +363,8 @@ function editExps(){
                 "expid":edit_expid[i].value,
                 "company": company[i].value,
                 "job": job[i].value,
-                "starttime": starttime,
-                "endtime": endtime,
+                "starttime": starttime[i].value,
+                "endtime": endtime[i].value,
                 "des": des[i].value
             },
             dataType: 'text',
@@ -373,13 +391,12 @@ function editEdus(){
     var edit_eduid = document.getElementsByName("edit_eduid");
     var selector = document.getElementsByName("eduselector");
     var major = document.getElementsByName("edumajor");
-    var period = document.getElementsByName("eduperiod");
     var course = document.getElementsByName("educourse");
+    var starttime = document.getElementsByName("edu_start_show");
+    var endtime = document.getElementsByName("edu_end_show");
     var n = school.length;
     var count = 0;
     for(i=0; i<n; i++){
-        var starttime = period[i].value.split("  -  ")[0];
-        var endtime = period[i].value.split("  -  ")[1];
         $.ajax({
             type: 'post',
             url: '/edu.servlet',
@@ -390,8 +407,8 @@ function editEdus(){
                 "school": school[i].value,
                 "degree": selector[i].value,
                 "major": major[i].value,
-                "starttime": starttime,
-                "endtime": endtime,
+                "starttime": starttime[i].value,
+                "endtime": endtime[i].value,
                 "course": course[i].value
             },
             dataType: 'text',
diff --git a/web/js/Experience/load_edu_to_person.js b/web/js/Experience/load_edu_to_person.js
index a1a0b4973531b5cbab9f0ca0c7293f24ec97be2b..de3402a4b9703977af6614071cd92f572998a6d1 100644
--- a/web/js/Experience/load_edu_to_person.js
+++ b/web/js/Experience/load_edu_to_person.js
@@ -76,5 +76,10 @@ function loadEdu(edu){
         '                        <label>Study Period:</label>\n' +
         '                        <span class="value">'+ edu.str_starttime + '  -  '+ edu.str_endtime +'</span>\n' +
         '                    </li>\n' +
+        '\n' +
+        '                    <li>\n' +
+        '                        <label>Main Course:</label>\n' +
+        '                        <span class="value">'+ edu.maincourse +'</span>\n' +
+        '                    </li>\n' +
         '                </ul>');
 }
\ No newline at end of file
diff --git a/web/js/Project/add_new_project.js b/web/js/Project/add_new_project.js
index 4328c37ee2677a8c09df01cb1f556297203b8e3e..b3946bd755bc706c7dde1d5eeee499d836c4acff 100644
--- a/web/js/Project/add_new_project.js
+++ b/web/js/Project/add_new_project.js
@@ -151,9 +151,10 @@ function loadTagToAdd(tag){
  * classify the file type, store into array
  */
 function classifyFiles(url){
-    var urls = url.replaceAll("\n","");
-    var index = urls.lastIndexOf(".");
-    var ext = urls.substr(index+1);
+
+    var index = url.lastIndexOf(".");
+    var ext = url.substr(index+1);
+    alert(url + ext)
 
     console.log(ext + "  " + ext.length);
 
@@ -237,6 +238,8 @@ function submitForm() {
     projectdescription = $('#description').val();
     var sel = document.getElementById("privacySelect");
     var privacyVal = sel.value;
+    starttime = $('#pro_start').val();
+    endtime = $('#pro_end').val();
 
     var aSpan=document.getElementById("tags").getElementsByTagName("span");
     for (var i = 0; i < aSpan.length; i++){
@@ -248,6 +251,7 @@ function submitForm() {
             }
         }
     }
+    // console.log(projectcontent);
 
     $.ajax({
         type : 'GET',
diff --git a/web/js/Project/load_project_according_tag.js b/web/js/Project/load_project_according_tag.js
index c745a1f7705dbcc9cb78008552ef8fb427e2a95e..91234be9df072dfd64e55a5d322b53491f0161f3 100644
--- a/web/js/Project/load_project_according_tag.js
+++ b/web/js/Project/load_project_according_tag.js
@@ -14,7 +14,7 @@ $(function() {
 $.extend({
     'getUrlParam' : function(){
         var query = window.location.href;
-        console.log(query);
+        // console.log(query);
         var tag = query.split('keywords=');
         return tag[1];
     }
@@ -44,8 +44,7 @@ function getInfo(){
             // for(x in data){
             //     loadProjectList(data[x]);
             // }
-            loadSubPage(data, 3);
-            clickevent();
+            loadSubProjectByTagPage(data, 3);
         },
         error : function(msg) {
             alert("projects failed");
@@ -78,15 +77,105 @@ function loadProjectList(project){
         '</li>');
 }
 
+
+loadSubProjectByTagPage = function(data, type){
+    // console.log("new Way load project By TAG PAge Bar")
+    var pageSize = 3;
+    var pageNum = Math.ceil(data.length/pageSize);
+    // alert(pageNum);
+    var dataStr = JSON.stringify(data);
+
+    if(pageNum == 0){
+        //$("#page-bar").append('<h4>No data here</h4>');
+    } else{
+        $("#page-bar").append('<div id="currentPage" style="display: none"></div>');    //用来存放当前页面编号
+        $("#page-bar").append("<li id='previousBtn' class='page-item disabled'>\n" +
+            "                                            <a class='page-link' href='#' tabindex='-1' onclick='changeTagPage("+"-1,"+dataStr+","+i+","+pageSize+","+pageNum+","+type+")'>Previous</a>\n" +
+            "                                        </li>");
+
+        for(var i=1; i<=pageNum; i++){
+            // $("#page-bar").append("<li class='page-item'><a class='page-link' onclick='loadParticularPage("+dataStr+","+i+","+pageSize+","+pageNum+",\""+idStr+",\""+htmlStr+"\")' href='#'>"+i+"</a></li>");
+            $("#page-bar").append("<li class='page-item' id='subpage"+i+"'><a class='page-link' onclick='loadProjectByTagPage("+dataStr+","+i+","+pageSize+","+pageNum+","+type+")' href='#'>"+i+"</a></li>");
+            // $("#page-bar").append('<li class="page-item">' +
+            //             //     '<a class="page-link" href="#" onclick="test(\''+data+'\')">'+i+'</a></li>');
+        }
+
+        $("#page-bar").append("<li id='nextBtn' class='page-item'>\n" +
+            "                                            <a class='page-link' href='#' tabindex='1' onclick='changeTagPage("+"1,"+dataStr+","+i+","+pageSize+","+pageNum+","+type+")'>Next</a>\n" +
+            "                                        </li>");
+
+        loadProjectByTagPage(data, 1, pageSize, pageNum, type);
+    }
+
+}
+
+function changeTagPage(move, dataStr, p, pageSize, pageNum, type){
+    // alert("change!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!")
+    // console.log("change!!!!!!!!!!")
+    var curPage = $("#currentPage").html();
+    var newPage = parseInt(curPage)+move;
+    if(newPage>0 && newPage<=pageNum){
+        // console.log("page change!!!!!")
+        loadProjectByTagPage(dataStr, newPage, pageSize, pageNum, type);
+    }
+}
+
+function loadProjectByTagPage(dataStr, p, pageSize, pageNum, type) {
+    var data = eval(dataStr);
+    // //清空原先列表
+    // $("#requestProjectList").html("");
+
+    //记录当前页的标号
+    $("#currentPage").html(p);
+
+    //样式准备
+    if(p > 1)   $("#previousBtn").attr("class", "page-item");
+    else    $("#previousBtn").attr("class", "page-item disabled");
+
+    if(p == pageNum)    $("#nextBtn").attr("class", "page-item disabled");
+    else    $("#nextBtn").attr("class", "page-item");
+
+    for(var i=1; i<=pageNum; i++){
+        $("#subpage"+i).attr("class", "page-item");
+    }
+    $("#subpage"+p).attr("class", "page-item active");
+
+    //加载数据显示列表
+    var start = (parseInt(p)-1)*pageSize;
+    // console.log(start);
+    // console.log(pageSize)
+
+    if (type ==3){
+        $('#projectByTag').html("");
+        for(var x=start; x<start+pageSize; x++){
+            var project = data[x];
+            // console.log(project);
+            if (project != undefined){
+                $('#projectByTag').append('<li><span class="proj-title"><a href="#keywords='+project.projectid+'">'+ project.projectname +'</a></span>\n' +
+                    '<a href="/webpage/project-related/editor.html?keywords='+ project.projectid +'">' +
+                    '   <input class="edit" type="button" value="EDIT"/>' +
+                    '</a>\n' +
+                    '<input id="'+ project.projectid +'" class="delete-list" type="button" value="DELETE"/>\n' +
+                    '<h5>Project Period: '+project.str_starttime + ' - ' + project.str_endtime +'</h5>\n' +
+                    '<p>'+ project.projectdescription +'</p>\n' +
+                    '</li>');
+            }
+        }
+    }
+    // console.log("detect onclick!!!!")
+    clickevent();
+
+}
+
 /**
  * click to see more details about a specific project
  */
 function clickevent() {
     jQuery(document).ready(function() {
-        console.log( document.querySelectorAll("li span a"));
+        // console.log( document.querySelectorAll("li span a"));
         document.querySelectorAll("li span a").forEach(v=>{
             v.addEventListener("click",function(e){
-                console.log("start to load project show");
+                // console.log("start to load project show");
                 $('#page-wrapper').html("");
                 $.ajax({
                     url : '/webpage/project-related/project-show.html', // 这里是静态页的地址
@@ -144,8 +233,8 @@ function clickevent() {
  * @param id
  */
 function deleteOneProject(id){
-    console.log("delete process")
-    console.log(id)
+    // console.log("delete process")
+    // console.log(id)
     var strcookie = document.cookie;
     var userIdStr = strcookie.split(";")[0];
     var userId = userIdStr.split("=")[1];
@@ -159,7 +248,15 @@ function deleteOneProject(id){
         },
         success: function(data){
             alert("Successfully Delete");
-            getInfo();
+            $('#page-wrapper').html("");
+            $.ajax({
+                url : '/webpage/project-related/project-list.html', // 这里是静态页的地址
+                async : false,
+                type : 'GET', // 静态页用get方法,否则服务器会抛出405错误
+                success : function(data) {
+                    $('#page-wrapper').append(data);
+                }
+            });
         },
         error : function(msg) {
             alert("Delete Failed");
diff --git a/web/js/Project/load_project_list.js b/web/js/Project/load_project_list.js
index a6e7c91506cee94f583d122d1f75614cac2f77bb..b4815c06642e6ae9710ccd1c2e0ae7b361a98282 100644
--- a/web/js/Project/load_project_list.js
+++ b/web/js/Project/load_project_list.js
@@ -18,7 +18,7 @@ $(function() {
 $.extend({
     'getUrlParam' : function(){
         var query = window.location.href;
-        console.log(query);
+        // console.log(query);
         var url = query.split('=');
         return url[1];
     }
@@ -39,13 +39,13 @@ function getInfo(){
         },
         dataType: 'json',
         success: function(data){
-            console.log(data);
+            // console.log(data);
             $('#projectAll').html("");
-            loadSubPage(data, 4);
+            $('#page-bar').html("");
+            loadSubProjectPage(data, 4);
             // for(x in data){
             //     loadProjectList(data[x]);
             // }
-            clickevent();
         },
         error : function(msg) {
             alert("projects failed");
@@ -69,15 +69,100 @@ function loadProjectList(project){
         '</li>');
 }
 
+loadSubProjectPage = function(data, type){
+    console.log("new way to page bar!!!!!")
+    var pageSize = 3;
+    var pageNum = Math.ceil(data.length/pageSize);
+    // alert(pageNum);
+    var dataStr = JSON.stringify(data);
+
+    if(pageNum == 0){
+        //$("#page-bar").append('<h4>No data here</h4>');
+    } else{
+        $("#page-bar").append('<div id="currentPage" style="display: none"></div>');    //用来存放当前页面编号
+        $("#page-bar").append("<li id='previousBtn' class='page-item disabled'>\n" +
+            "                                            <a class='page-link' href='#' tabindex='-1' onclick='changeAllListPage("+"-1,"+dataStr+","+i+","+pageSize+","+pageNum+","+type+")'>Previous</a>\n" +
+            "                                        </li>");
+
+        for(var i=1; i<=pageNum; i++){
+            // $("#page-bar").append("<li class='page-item'><a class='page-link' onclick='loadParticularPage("+dataStr+","+i+","+pageSize+","+pageNum+",\""+idStr+",\""+htmlStr+"\")' href='#'>"+i+"</a></li>");
+            $("#page-bar").append("<li class='page-item' id='subpage"+i+"'><a class='page-link' onclick='loadProjectListPage("+dataStr+","+i+","+pageSize+","+pageNum+","+type+")' href='#'>"+i+"</a></li>");
+            // $("#page-bar").append('<li class="page-item">' +
+            //             //     '<a class="page-link" href="#" onclick="test(\''+data+'\')">'+i+'</a></li>');
+        }
+
+        $("#page-bar").append("<li id='nextBtn' class='page-item'>\n" +
+            "                                            <a class='page-link' href='#' tabindex='1' onclick='changeAllListPage("+"1,"+dataStr+","+i+","+pageSize+","+pageNum+","+type+")'>Next</a>\n" +
+            "                                        </li>");
+
+        loadProjectListPage(data, 1, pageSize, pageNum, type);
+    }
+
+}
+
+function changeAllListPage(move, dataStr, p, pageSize, pageNum, type){
+    // alert("change!!!!!!!!!!!!!!");
+    var curPage = $("#currentPage").html();
+    var newPage = parseInt(curPage)+move;
+    if(newPage>0 && newPage<=pageNum){
+        loadProjectListPage(dataStr, newPage, pageSize, pageNum, type);
+    }
+}
+
+function loadProjectListPage(dataStr, p, pageSize, pageNum, type) {
+    var data = eval(dataStr);
+    // //清空原先列表
+    // $("#requestProjectList").html("");
+
+    //记录当前页的标号
+    $("#currentPage").html(p);
+
+    //样式准备
+    if(p > 1)   $("#previousBtn").attr("class", "page-item");
+    else    $("#previousBtn").attr("class", "page-item disabled");
+
+    if(p == pageNum)    $("#nextBtn").attr("class", "page-item disabled");
+    else    $("#nextBtn").attr("class", "page-item");
+
+    for(var i=1; i<=pageNum; i++){
+        $("#subpage"+i).attr("class", "page-item");
+    }
+    $("#subpage"+p).attr("class", "page-item active");
+
+    //加载数据显示列表
+    var start = (parseInt(p)-1)*pageSize;
+
+    if (type == 4){
+        $('#projectAll').html("");
+        for (var x=start; x<start+pageSize;x++){
+            var project = data[x];
+            if (project!=undefined){
+                $('#projectAll').append('<li><span class="proj-title"><a href="#keywords='+project.projectid+'">'+ project.projectname +'</a></span>\n' +
+                    '<a href="/webpage/project-related/editor.html?keywords='+ project.projectid +'">' +
+                    '   <input class="edit" type="button" value="EDIT"/>' +
+                    '</a>\n' +
+                    '<input id="'+ project.projectid +'" class="delete-list" type="button" value="DELETE"/>\n' +
+                    '<h5>Project Period: '+project.str_starttime + ' - ' + project.str_endtime +'</h5>\n' +
+                    '<p>'+ project.projectdescription +'</p>\n' +
+                    '</li>');
+            }
+        }
+    }
+
+    // console.log("load click event")
+
+    clickevent();
+}
+
 /**
  * delete, edit and view project click event definetion
  */
 function clickevent() {
     jQuery(document).ready(function() {
-        console.log( document.querySelectorAll("li span a"));
+        // console.log( document.querySelectorAll("li span a"));
         document.querySelectorAll("li span a").forEach(v=>{
             v.addEventListener("click",function(e){
-                console.log("start to load project show");
+                // console.log("start to load project show");
                 $('#page-wrapper').html("");
                 $.ajax({
                     url : '/webpage/project-related/project-show.html', // 这里是静态页的地址
@@ -112,7 +197,7 @@ function clickevent() {
                             btnClass: 'btn-primary',
                             keys: ['enter'],
                             action: function(){
-                                console.log("delete confirm");
+                                // console.log("delete confirm");
                                 var pid = v.id;
                                 deleteOneProject(pid);
                             }
@@ -134,8 +219,8 @@ function clickevent() {
  * @param id
  */
 function deleteOneProject(id){
-    console.log("delete proceess  ");
-    console.log(id);
+    // console.log("delete proceess  ");
+    // console.log(id);
     $.ajax({
         type: 'post',
         url: '/DeleteServlet',
diff --git a/web/js/Project/load_project_to_editor.js b/web/js/Project/load_project_to_editor.js
index 8a285d9941325e2c4f6f2aef171c59adc6bf1686..a88d4aaf31e1196656ceeba3e7d0ea1b3e7e222d 100644
--- a/web/js/Project/load_project_to_editor.js
+++ b/web/js/Project/load_project_to_editor.js
@@ -30,30 +30,6 @@ $.extend({
     }
 });
 
-function getDBTags(){
-    //var userId=$("#userId").val();
-    var item = 0;
-    $.ajax({
-        type: 'post',
-        url: '/query.tag',
-        data: {
-            "type": "queryAllTag",
-            "userid": userId
-        },
-        dataType: 'json',
-        success: function(data){
-            for(x in data){
-                loadTagToSelect(data[x]);
-            }
-            loadButton();
-        },
-        error : function(msg) {
-            alert("get tags failed");
-            console.log(msg)
-        }
-    });
-}
-
 function getProjectInfo(){
 
     console.log("load project list");
@@ -111,11 +87,38 @@ function getOneProjectTag(){
     });
 }
 
+function getDBTags(){
+    //var userId=$("#userId").val();
+    var item = 0;
+    $.ajax({
+        type: 'post',
+        url: '/query.tag',
+        data: {
+            "type": "queryAllTag",
+            "userid": userId
+        },
+        dataType: 'json',
+        success: function(data){
+            for(x in data){
+                loadTagToSelect(data[x]);
+            }
+        },
+        error : function(msg) {
+            alert("get tags failed");
+            console.log(msg)
+        }
+    });
+}
+
 function loadProjectToEditor(data){
     console.log("fill info into the blank")
     document.getElementById("editTitle").value = data.projectname;
     KindEditor.html('#editContent', data.content);
     $('#editDescription').append(data.projectdescription);
+    // console.log(data.str_starttime);
+    // console.log(data.str_endtime);
+    $('#edit_pro_start').val(data.str_starttime);
+    $('#edit_pro_end').val(data.str_endtime);
 
     if (data.visibility == 2){
         $('#editPrivacy').append('<option value="2" selected="selected">Public Project</option>\n' +
@@ -158,6 +161,6 @@ function loadTagsToEditor(taglist){
 
 function loadTagToSelect(tag){
     if (tag.projecttag != null){
-        $('#editorProjecttags').append('<option value="'+ tag.projecttag +'">');
+        $('#editorProjecttags').append('<option value="'+ tag.projecttag +'">'+tag.projecttag+'</option>');
     }
 }
\ No newline at end of file
diff --git a/web/js/Project/update_old_project.js b/web/js/Project/update_old_project.js
index b9192d394d46f95cf9293daafc0590d004ea3e28..4ee442415c410549e5a99f0637e6193ee4a32fd1 100644
--- a/web/js/Project/update_old_project.js
+++ b/web/js/Project/update_old_project.js
@@ -203,7 +203,9 @@ function submitForm() {
     projectdescription = $('#editDescription').val();
     var sel = document.getElementById("editPrivacy");
     var privacyVal = sel.value;
-    console.log(projectcontent);
+    starttime = $('#edit_pro_start').val();
+    endtime = $('#edit_pro_end').val();
+    // console.log(projectcontent);
 
     var aSpan=document.getElementById("editTags").getElementsByTagName("span");
     for (var i = 0; i < aSpan.length; i++){
@@ -212,7 +214,6 @@ function submitForm() {
         }else if (i!=0 && i % 2 ==0){
             projecttag = projecttag + aSpan[i].innerText + ";;;";
         }
-
     }
 
     $.ajax({
diff --git a/web/webpage/admin-related/admin-background.html b/web/webpage/admin-related/admin-background.html
index b325982be4eb4ac72f5a34327afcf92a57ee3485..af990f143f5b5ccbc4a0a36c4a9ffc88b4f92c7e 100644
--- a/web/webpage/admin-related/admin-background.html
+++ b/web/webpage/admin-related/admin-background.html
@@ -216,7 +216,12 @@
                     <div class="form-group">
                         <label class="col-sm-2 control-label" style="font-weight: 400">Study Period</label>
                         <div class="col-sm-8">
-                            <input id="studyPeriod" type="text" class="form-control1" placeholder="DD/MM/Year - DD/MM/Year" style="background-color: #fff">
+                            <div class="input-group input-daterange">
+                                <input id="edu_start" type="text" placeholder="DD-MM-Year" data-date-format="yyyy-mm-dd" class="form-control1" style="background-color: #fff"/>
+                                <div class="input-group-addon">To</div>
+                                <input id="edu_end" type="text" placeholder="DD-MM-Year" data-date-format="yyyy-mm-dd" class="form-control1" style="background-color: #fff"/>
+                            </div>
+                            <!--<input id="studyPeriod" type="text" class="form-control1" placeholder="DD/MM/Year - DD/MM/Year" style="background-color: #fff">-->
                         </div>
                     </div>
 
@@ -268,7 +273,12 @@
                     <div class="form-group">
                         <label class="col-sm-2 control-label" style="font-weight: 400">Work Period</label>
                         <div class="col-sm-8">
-                            <input id="workPeriod" type="text" class="form-control1" placeholder="DD-MM-Year - DD-MM-YEAR" style="background-color: #fff">
+                            <div class="input-group input-daterange">
+                                <input id="work_start" type="text" placeholder="DD-MM-Year" data-date-format="yyyy-mm-dd" class="form-control1" style="background-color: #fff"/>
+                                <div class="input-group-addon">To</div>
+                                <input id="work_end" type="text" placeholder="DD-MM-Year" data-date-format="yyyy-mm-dd" class="form-control1" style="background-color: #fff"/>
+                            </div>
+                            <!--<input id="workPeriod" type="text" class="form-control1" placeholder="DD-MM-Year - DD-MM-YEAR" style="background-color: #fff">-->
                         </div>
                     </div>
 
diff --git a/web/webpage/project-related/add.html b/web/webpage/project-related/add.html
index 505657d1a06566abbb4033e2faafc8f03db017ba..8bc145a62be6268c0de2e7808b6d229e9ff6fa51 100644
--- a/web/webpage/project-related/add.html
+++ b/web/webpage/project-related/add.html
@@ -22,7 +22,8 @@
     <link rel="stylesheet" href="/css/Editor/editorFormat.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
     <link rel="stylesheet" href="/css/Tags/input-tags.css">
-
+    <link rel="stylesheet" href="/css/Editor/timebar.css">
+    <link href="/datepicker/dist/css/bootstrap-datepicker3.min.css" rel="stylesheet">
     <style>
         input[disabled] {
             color: #cccccc;
@@ -69,6 +70,20 @@
                                 </div>
                             </div>
                         </div>
+
+                        <div class="layui-card">
+                            <div class="layui-card-header">Time Period</div>
+                            <div class="layui-card-body">
+                                <div class="layui-form-item">
+                                    <div class="input-group input-daterange">
+                                        <input id="pro_start" type="text" placeholder="Project Start Time(DD-MM-Year)" data-date-format="yyyy-mm-dd" class="timebar" style="background-color: #fff"/>
+                                        <div class="input-group-addon">To</div>
+                                        <input id="pro_end" type="text" placeholder="Project End Time(DD-MM-Year)" data-date-format="yyyy-mm-dd" class="timebar" style="background-color: #fff"/>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
                         <div class="layui-card">
                             <div class="layui-card-header">Project Content</div>
                             <div class="layui-card-body">
@@ -168,6 +183,7 @@
 <script src="/js/Project/add_new_project.js"></script>
 <script src="/js/Project/add_tag.js"></script>
 <script src="/js/jquery-confirm.js"></script>
+<script src="/datepicker/dist/js/bootstrap-datepicker.js"></script>
 <script>
     KindEditor.ready(function(K) {
         // black theme
@@ -219,6 +235,22 @@
         console.log('Get new value after delete the tags', res)
     })
 </script>
+<script>
+    $('#pro_start').datepicker({
+        autoclose: true,
+        clearBtn: true,
+        todayBtn: true,
+        todayHighlight: true,
+        format: 'yyyy-mm-dd'
+    });
+    $('#pro_end').datepicker({
+        autoclose: true,
+        clearBtn: true,
+        todayBtn: true,
+        todayHighlight: true,
+        format: 'yyyy-mm-dd'
+    });
+</script>
 
 </body>
 
diff --git a/web/webpage/project-related/editor.html b/web/webpage/project-related/editor.html
index dc904419c4b954eedc497405feb22958457f173d..fbdb51f1cfe6e62ee89202e65f11c79bbef61ff9 100644
--- a/web/webpage/project-related/editor.html
+++ b/web/webpage/project-related/editor.html
@@ -2,7 +2,7 @@
 <html xmlns:th="http://www.w3.org/1999/xhtml">
 <head>
     <meta charset="utf-8" />
-    <title>Add Your New Project</title>
+    <title>Edit Your Current Project</title>
     <link href="/css/bootstrap.min.css" rel="stylesheet">
     <style>
         .tab-pane form {
@@ -22,6 +22,8 @@
     <link rel="stylesheet" href="/css/Tags/input-tags.css">
     <link rel="stylesheet" href="/css/Editor/editorFormat.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
+    <link rel="stylesheet" href="/css/Editor/timebar.css">
+    <link href="/datepicker/dist/css/bootstrap-datepicker3.min.css" rel="stylesheet">
     <style>
         input[disabled] {
             color: #cccccc;
@@ -66,6 +68,20 @@
                             </div>
                         </div>
                     </div>
+
+                    <div class="layui-card">
+                        <div class="layui-card-header">Time Period</div>
+                        <div class="layui-card-body">
+                            <div class="layui-form-item">
+                                <div class="input-group input-daterange">
+                                    <input id="edit_pro_start" type="text" placeholder="Project Start Time(DD-MM-Year)" data-date-format="yyyy-mm-dd" class="timebar" style="background-color: #fff"/>
+                                    <div class="input-group-addon">To</div>
+                                    <input id="edit_pro_end" type="text" placeholder="Project End Time(DD-MM-Year)" data-date-format="yyyy-mm-dd" class="timebar" style="background-color: #fff"/>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
                     <div class="layui-card">
                         <div class="layui-card-header">Project Content</div>
                         <div class="layui-card-body">
@@ -163,6 +179,7 @@
 <script src="/js/Project/load_project_to_editor.js"></script>
 <script src="/js/Project/update_old_project.js"></script>
 <script src="/js/jquery-confirm.js"></script>
+<script src="/datepicker/dist/js/bootstrap-datepicker.js"></script>
 <script>
     KindEditor.ready(function(K) {
 
@@ -190,6 +207,22 @@
         alert($('textarea[name="content1"]').val());
     });
 </script>
+<script>
+    $('#edit_pro_start').datepicker({
+        autoclose: true,
+        clearBtn: true,
+        todayBtn: true,
+        todayHighlight: true,
+        format: 'yyyy-mm-dd'
+    });
+    $('#edit_pro_end').datepicker({
+        autoclose: true,
+        clearBtn: true,
+        todayBtn: true,
+        todayHighlight: true,
+        format: 'yyyy-mm-dd'
+    });
+</script>
 </body>
 </html>