Verwenden von Datepicker über Bootstrap3

Question

Ich habe derzeit eine Seite, wo ich Startdatum und Enddatum habe. Sobald das Startdatum ausgewählt ist, werden alle Daten nach dem Enddatum automatisch 30 Tage nach dem Startdatum ausgegraut. Ich habe den Datenbereich-max-days = "30" in meinem HTML-Markup definiert.

Meine erste Frage ist, dass wenn ich das Formular abschicke, die Seite neu geladen wird. Obwohl das Startdatum in dem Feld angezeigt wird, hat das Enddatum jetzt nicht diese Einschränkung für 30 Tage und ich kann ein beliebiges Datum auswählen, was ich nicht möchte.

meine erste Aufnahme des Codes ist dies:

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

Mein zweites nimmt bei dem Versuch, die Funktionalität, was zu Fehlern zu brechen, wo Methoden wie clear() etc. sind nicht einmal erkannt dp.change ist das Bild herausgenommen.

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

Ich löste dies. Verwenden Sie die Methode "Bootstrapper 3 dp.show", um Eingaben zu erkennen und führen Sie von dort eine Neuberechnung durch.