Question

使用引导日期选择器时，是否可以阻止用户选择过去的日期？

我尝试使用.datepicker({ minDate: 0 })，但它似乎没有用。

.done(function (response) {
                        view.data = response;
                        $pageHeader.after(view.options.template(response));
                        view.$('.datepicker:not([readonly])')
                            .datepicker({ minDate: 0})
                            .on('changeDate', function () {
                                $(this).datepicker('hide');
                            });

Answer 1

minDate不是bootstrap datepicker的选项，但您可以覆盖datepicker：

$.fn.datepicker.prototype.click: function(e) {
  e.stopPropagation();
  e.preventDefault();
  var target = $(e.target).closest('span, td, th');
  if (target.length == 1) {
    switch(target[0].nodeName.toLowerCase()) {
      case 'th':
        switch(target[0].className) {
          case 'switch':
            this.showMode(1);
            break;
          case 'prev':
          case 'next':
            this.viewDate['set'+DPGlobal.modes[this.viewMode].navFnc].call(
              this.viewDate,
              this.viewDate['get'+DPGlobal.modes[this.viewMode].navFnc].call(this.viewDate) + 
              DPGlobal.modes[this.viewMode].navStep * (target[0].className == 'prev' ? -1 : 1)
            );
            this.fill();
            break;
        }
        break;
      case 'span':
        if (target.is('.month')) {
          var month = target.parent().find('span').index(target);
          this.viewDate.setMonth(month);
        } else {
          var year = parseInt(target.text(), 10)||0;
          this.viewDate.setFullYear(year);
        }
        this.showMode(-1);
        this.fill();
        break;
      //=================
      // Here is where a date is selected
      //=================
      case 'td':
        if (target.is('.day')){
          var day = parseInt(target.text(), 10)||1;
          var month = this.viewDate.getMonth();
          if (target.is('.old')) {
            month -= 1;
          } else if (target.is('.new')) {
            month += 1;
          }
          var year = this.viewDate.getFullYear();

          // Change some stuff here
          date = new Date(year, month, day,0,0,0,0);
          if(date >= this.options.minDate) {
            this.date = date
            this.viewDate = new Date(year, month, day,0,0,0,0);
            this.fill();
            this.setValue();
          } else {
            // what should we do if the date is less than minDate?
          }

          this.element.trigger({
            type: 'changeDate',
            date: this.date
          });
        }
        break;
    }
  }
};

OR 另一个选项是允许回调处理它：

$.fn.datepicker.prototype.click: function(e) {
  e.stopPropagation();
  e.preventDefault();
  var target = $(e.target).closest('span, td, th');
  if (target.length == 1) {
    switch(target[0].nodeName.toLowerCase()) {
      case 'th':
        switch(target[0].className) {
          case 'switch':
            this.showMode(1);
            break;
          case 'prev':
          case 'next':
            this.viewDate['set'+DPGlobal.modes[this.viewMode].navFnc].call(
              this.viewDate,
              this.viewDate['get'+DPGlobal.modes[this.viewMode].navFnc].call(this.viewDate) + 
              DPGlobal.modes[this.viewMode].navStep * (target[0].className == 'prev' ? -1 : 1)
            );
            this.fill();
            break;
        }
        break;
      case 'span':
        if (target.is('.month')) {
          var month = target.parent().find('span').index(target);
          this.viewDate.setMonth(month);
        } else {
          var year = parseInt(target.text(), 10)||0;
          this.viewDate.setFullYear(year);
        }
        this.showMode(-1);
        this.fill();
        break;
      //=================
      // Here is where a date is selected
      //=================
      case 'td':
        if (target.is('.day')){
          var day = parseInt(target.text(), 10)||1;
          var month = this.viewDate.getMonth();
          if (target.is('.old')) {
            month -= 1;
          } else if (target.is('.new')) {
            month += 1;
          }
          var year = this.viewDate.getFullYear();
          // SAVE THE OLD DATE
          oldDate = this.date
          this.date = new Date(year, month, day,0,0,0,0);
          this.viewDate = new Date(year, month, day,0,0,0,0);
          this.fill();
          this.setValue();
          this.element.trigger({
            type: 'changeDate',
            date: this.date,
            // pass it into the event object
            oldDate: oldDate
          });
        }
        break;
    }
  }
};

<强>资源

http://www.eyecon.ro/bootstrap-datepicker/

Answer 2

使用bootstrap datepicker中的fork https://github.com/eternicode/bootstrap-datepicker

并输入一些简单的逻辑来更新startdate时更新endDate的startdate

$('#start_date').datepicker().on('changeDate', function(ev){
  $('#end_date').datepicker('setStartDate', ev.date);
});

不要让用户选择过去的日期？

2 个答案: