通過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

回答

相關問題