Bootstrap3経由でDatepickerを使用する

Question

私は現在、開始日と終了日を持つページを持っています。開始日が選択されると、終了日は開始日の30日後に自動的にすべての日付がグレー表示されます。私はhtmlのマークアップでdata-range-max-days = "30"を定義しました。

私の最初の問題は、フォームを送信するとページがリロードされることです。しかし、フィールドに開始日が表示されても、終了日には30日の制約がなく、任意の日付を選択することができます。これは私がしたいことではありません。

コードの私の最初のテイクがこれです：

機能を分割しようとしている中に私の第二テイクは明確なような方法（）などがdp.change一度認識されていないエラーが生じている

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

画像が取り出されます。

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メソッドを使用して入力を検出し、そこから再計算を実行します。