通过Bootstrap3使用Datepicker

我目前有一个页面，我有开始日期和结束日期。一旦选择开始日期，结束日期将自动变灰开始日期后30天的所有日期。我在我的html标记中定义了数据范围-max-days =“30”。通过Bootstrap3使用Datepicker

我的第一个问题是，当我提交表单时，页面会重新加载。但是，即使它显示字段中的开始日期，结束日期现在也没有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被拿出来的照片。

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); 
     } 
     } 
    // }); 
    } 
}

来源

2017-03-01 Jacklyn N

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

来源

2017-03-03 19:49:18

通过Bootstrap3使用Datepicker

回答

相关问题