Question

我目前有一个页面，我有开始日期和结束日期。选择开始日期后，结束日期将自动显示开始日期后30天的所有日期。我已经定义了data-range-max-days =＆＃34; 30＆＃34;在我的HTML标记中。

我的第一个问题是，当我提交表单时，页面会重新加载。然而，即使它在字段中显示开始日期，结束日期现在也没有30天的约束，我可以选择任何日期，这不是我想要它做的。

我对代码的首次考虑是：

import 'eonasdan-bootstrap-datetimepicker';

    import 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css';

    export default class {
      constructor(el) {

        $(el).datetimepicker({
          icons: {
            time: "fa fa-clock-o",
            date: "fa fa-calendar",
            up: "fa fa-arrow-up",
            down: "fa fa-arrow-down",
            clear: "fa fa-refresh"
          }, // use font awesome icons cause I'm vain
          useCurrent: false, // don't default to current datetime
          ignoreReadonly: true,
          showClear: true
        });

        if($(el).hasClass('startDate')) {
            this.listen();
        }
      }

      listen() {
        $('.startDate').on('dp.change', function (e) {

          $('.endDate').data('DateTimePicker').clear();
          $('.endDate').data('DateTimePicker').maxDate(false);
          $('.endDate').data('DateTimePicker').showClear(true);

          if(e.date) {
            var addDays = $('.endDate').data('rangeMaxDays');
            if(addDays > 0) {

              var currentDate = new Date();
              var maxDate = new Date(e.date);
              maxDate.setDate(maxDate.getDate() + addDays);

              var maxDateStr = (maxDate.getMonth()+1) + '-' + maxDate.getDate() + '-' + maxDate.getFullYear() + ' 11:59 PM';

              if(currentDate > maxDate) {
                $('.endDate').data('DateTimePicker').showClear(false);
                $('.endDate').data('DateTimePicker').defaultDate(maxDateStr);
              }

              // Add days to limit the max selectable date
              $('.endDate').data('DateTimePicker').maxDate(maxDateStr);
            }
          }
        });
      }
    }

我尝试分解功能的第二个尝试导致错误，一旦dp.change从图片中取出，就会无法识别clear（）等方法。

import 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css';

export default class {
  constructor(el) {

    $(el).datetimepicker({
      icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-arrow-up",
        down: "fa fa-arrow-down",
        clear: "fa fa-refresh"
      }, // use font awesome icons cause I'm vain
      useCurrent: false, // don't default to current datetime
      ignoreReadonly: true,
      showClear: true
    });

    if($(el).hasClass('startDate')) {
        this.listen();
    }
  $('.startDate').on('dp.change', function (e) {
      this.listen();
  });
  }



  listen() {
 // $('.startDate').on('dp.change', function (e) {

      $('.endDate').data('DateTimePicker').clear();
      $('.endDate').data('DateTimePicker').maxDate(false);
      $('.endDate').data('DateTimePicker').showClear(true);

      if(e.date) {
        var addDays = $('.endDate').data('rangeMaxDays');
        if(addDays > 0) {

          var currentDate = new Date();
          var maxDate = new Date(e.date);
          maxDate.setDate(maxDate.getDate() + addDays);

          var maxDateStr = (maxDate.getMonth()+1) + '-' + maxDate.getDate() + '-' + maxDate.getFullYear() + ' 11:59 PM';

          if(currentDate > maxDate) {
            $('.endDate').data('DateTimePicker').showClear(false);
            $('.endDate').data('DateTimePicker').defaultDate(maxDateStr);
          }

          // Add days to limit the max selectable date
          $('.endDate').data('DateTimePicker').maxDate(maxDateStr);
        }
      }
  // });
  }
}

Answer 1

我解决了这个问题。使用bootstrapper 3 dp.show方法检测输入，并从那里执行重新计算。

通过Bootstrap3使用Datepicker

1 个答案: