0

ブートストラップ日付ピッカーを使用するときに、ユーザーが過去の日付を選択できないようにすることはできますか？

を使ってみ.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');
                            });
4

2 に答える 2

0

minDateはブートストラップ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;
    }
  }
};

または、別のオプションは、コールバックがそれを処理できるようにすることです。

$.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;
    }
  }
};

資力

于 2012-07-26T17:53:29.707 に答える
0

ブートストラップdatepickerhttps://github.com/eternicode/bootstrap-datepickerからこのフォークを使用し ます

開始日が変更されたときにendDateの開始日を更新するためのいくつかの単純なロジックを配置します

$('#start_date').datepicker().on('changeDate', function(ev){
  $('#end_date').datepicker('setStartDate', ev.date);
});
于 2013-01-28T21:17:05.337 に答える