bootstrap datetimepicker 插件设置开始时间结束时间

在项目中有用到 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);
        }
      });
    });