在專案中有用到 bootstrap的datetimepicker外掛來選擇日期。現在要求實現的是選擇一段時間範圍，有開始時間和結束時間兩個表單選擇

當先選擇開始時間，再選結束時間不能選擇小於開始時間的時間。先選擇結束時間，開始時間不大於結束時間。以下是實現程式碼

 var dateOptions = {
    language: 'zh-CN',
    format: 'yyyy-mm-dd hh:ii',
    minuteStep: 1,
    autoclose: true
  },
  $('#startDate').datetimepicker(dateOptions).on('show'
 
, function () {
      var endTime = $('#endDate').val();
      if (endTime !== '') {
        $(this).datetimepicker('setEndDate', endTime);
      }else{
        $(this).datetimepicker('setEndDate', null);
      }
    })
    .on('hide', function () {//這裡是要求開始時間必選所以在時間面板隱藏時要驗證開始時間並顯示相應的錯誤提示（不需要可刪除）
      var
 
 startTime = $('#startDate').val();
      if (!startTime) {
        $('.start-box').addClass('has-error');
        $('.date-box .error-msg').show();
      } else {
        $('.start-box').removeClass('has-error');
        $('.date-box .error-msg').hide();
      }
    });
    $('#endDate').datetimepicker(self.dateOptions).on('show'
 
, function () {
      var startTime = $('#startDate').val();
      if (startTime !== '') {
        $(this).datetimepicker('setStartDate', startTime);
      }else{
        $(this).datetimepicker('setStartDate', null);
      }
    });

點選清空按鈕，點選後輸入框的值清空。程式碼如下：

$('.date-box .btn-cancle').on('click', function () {
      $('#startDate,#endDate').val('');
 });

不過這裡有個問題就是，就是總有一個日期面板恢復不了到初始狀態（如先選擇開始時間再選擇結束時間，然後點取消，當再選擇結束時間發現面板已經限制了開始時間），目前我也沒有真正明白是什麼原因引起的，看了原始碼，從對應的方法中瞭解，應該是this.startDate或this.endDate被修改了。如果把這兩個值恢復預設值就不會出現這樣的問題。

//...

setStartDate: function (startDate) {
      // this.startDate = startDate || this.startDate;
      // 傳入空或null時恢復預設
      this.startDate = startDate || new Date(-8639968443048000);
      if (this.startDate.valueOf() !== 8639968443048000) {
        this.startDate = DPGlobal.parseDate(this.startDate, this.format, this.language, this.formatType, this.timezone);
      }
      this.update();
      this.updateNavArrows();
    },

    setEndDate: function (endDate) {
       // this.endDate = endDate || this.endDate;
      //傳入空或null時恢復預設
      this.endDate = endDate || new Date(8639968443048000);
      if (this.endDate.valueOf() !== 8639968443048000) {
        this.endDate = DPGlobal.parseDate(this.endDate, this.format, this.language, this.formatType, this.timezone);
      }
      this.update();
      this.updateNavArrows();
    },
    //...

如果不想改原始碼還有另外一個方法先remove再繫結事件：

$('.date-box .btn-cancle').on('click', function () {
      $('#startDate').val('');
      $('#endDate').val('');
      $('#endDate').datetimepicker('remove');
      $('#endDate').datetimepicker(dateOptions).on('show', function () {
        var startTime = $('#startDate').val();
        if (startTime !== '') {
          $(this).datetimepicker('setStartDate', startTime);
        }
      });
    });