datetimepicker bootstrap minDate und maxDate im beobachtbaren Knockout

Question

Ich benutze das Plugin bootstrap-datetimepicker mit knockout js. Ich habe einen Handler getan, um dynamisch zu verwalten und MaxDate MinDate, wie ich weiter unten zeigen:

ko.bindingHandlers.dateTimePicker = { 
    init: function (element, valueAccessor, allBindingsAccessor) { 
     //initialize datepicker with some optional options 
     var options = allBindingsAccessor().dateTimePickerOptions || {}; 
     $(element).datetimepicker(options); 

     //when a user changes the date, update the view model 
     ko.utils.registerEventHandler(element, "dp.change", function (event) {   
      var value = valueAccessor(); 
      if (ko.isObservable(value)) { 
       if (event.date && event.date != null && !(event.date instanceof Date)) { 
        value(event.date.toDate()); 
       } else { 
        //value(event.date); 
        value(undefined); 
       } 
      } 
     }); 

     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      var picker = $(element).data("DateTimePicker"); 
      if (picker) { 
       picker.destroy(); 
      } 
     }); 
    }, 
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) { 
     var picker = $(element).data("DateTimePicker"); 
     //when the view model is updated, update the widget 
     if (picker) { 
      //Usamos moment para convertir a fecha ya que utiliza este plugin adicional datetimepicker 
      var koDate = moment(ko.utils.unwrapObservable(valueAccessor()) || ''); 
      if (koDate.isValid()) picker.date(koDate.toDate() || null); 
     } 
    } 
}; 

ko.bindingHandlers.minDate = { 
    update: function (element, valueAccessor) { 
     var value = moment(ko.utils.unwrapObservable(valueAccessor()) || ''), 
      picker = $(element).data("DateTimePicker"); 
     if (value.isValid() && picker) { 
      picker.minDate(value.toDate());     
     } 
    } 
}; 

ko.bindingHandlers.maxDate = { 
    update: function (element, valueAccessor) { 
     var value = moment(ko.utils.unwrapObservable(valueAccessor()) || ''), 
      picker = $(element).data("DateTimePicker"); 
     if (value.isValid() && picker) { 
      picker.maxDate(value.toDate());     
     } 
    } 
}; 

ich es wie folgt verwenden:

<div class="input-group" data-bind="dateTimePicker: NuevaTarea.FechaInicio, dateTimePickerOptions: { format: 'L', showClear: true }, minDate: NuevaTarea.minDate, maxDate: NuevaTarea.maxDate"> 
            <input type="text" class="form-control" /> 
            <div class="input-group-addon"> 
             <i class="fa fa-calendar"></i> 
            </div> 
           </div> 

Das Problem ist, wenn eine Änderung der NuevaTarea.minDate und NuevaTarea. maxDate, das Datum von MaxDate wird NuevaTarea.FechaInicio zugewiesen.

Jemand könnte mir helfen, ein beobachtbares MaxDate MinDate zu erstellen und richtig zu funktionieren? Nein, ich mache falsch.

Die Version des Plugins ist 4.15.35. https://github.com/Eonasdan/bootstrap-datetimepicker

Answer 1

ko.bindingHandlers.dateTimePicker = { 
 
    init: function (element, valueAccessor, allBindingsAccessor) { 
 
     //initialize datepicker with some optional options 
 
     var options = allBindingsAccessor().dateTimePickerOptions || {}; 
 
     $(element).datetimepicker(options); 
 

 
     //when a user changes the date, update the view model 
 
     ko.utils.registerEventHandler(element, "dp.change", function (event) {   
 
      var value = valueAccessor(); 
 
      if (ko.isObservable(value)) { 
 
       if (event.date && event.date != null && !(event.date instanceof Date)) { 
 
        value(event.date.toDate()); 
 
       } else { 
 
        //value(event.date); 
 
        value(undefined); 
 
       } 
 
      } 
 
     }); 
 

 
     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
 
      var picker = $(element).data("DateTimePicker"); 
 
      if (picker) { 
 
       picker.destroy(); 
 
      } 
 
     }); 
 
    }, 
 
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) { 
 
     var picker = $(element).data("DateTimePicker"); 
 
     //when the view model is updated, update the widget 
 
     if (picker) { 
 
      //Usamos moment para convertir a fecha ya que utiliza este plugin adicional datetimepicker 
 
      var koDate = moment(ko.utils.unwrapObservable(valueAccessor()) || ''); 
 
      if (koDate.isValid()) picker.date(koDate.toDate() || null); 
 
     } 
 
    } 
 
}; 
 

 
ko.bindingHandlers.minDate = { 
 
    update: function (element, valueAccessor) { 
 
     var value = moment(ko.utils.unwrapObservable(valueAccessor()) || ''), 
 
      picker = $(element).data("DateTimePicker"); 
 
     if (value.isValid() && picker) { 
 
      picker.minDate(value.toDate());     
 
     } 
 
    } 
 
}; 
 

 
ko.bindingHandlers.maxDate = { 
 
    update: function (element, valueAccessor) { 
 
     var value = moment(ko.utils.unwrapObservable(valueAccessor()) || ''), 
 
      picker = $(element).data("DateTimePicker"); 
 
     if (value.isValid() && picker) { 
 
      picker.maxDate(value.toDate());     
 
     } 
 
    } 
 
}; 
 

 
function ViewModel() { 
 
\t var self = this; 
 
    self.NuevaTarea = { 
 
    \t FechaInicio: ko.observable(), 
 
    FechaFin: ko.observable(), 
 
    minDate: ko.observable(), 
 
    maxDate: ko.observable() 
 
    }; 
 
    
 
    self.NuevaTarea.minDate(new Date()) ; 
 
    //Not is working apply value null, help here!! I Like that this field is empty on start 
 
    self.NuevaTarea.FechaInicio(null); 
 
} 
 

 
ko.applyBindings(new ViewModel());

body{height:300px; padding:20px;}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      
 
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/css/bootstrap-datetimepicker.min.css"> 
 
     
 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
      
 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
      
 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script> 
 
      
 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
      
 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/js/bootstrap-datetimepicker.min.js"></script> 
 
    
 
<div class="form-group"> 
 
<label class="control-label">Min Date:</label> 
 
<div class="input-group" data-bind="dateTimePicker: NuevaTarea.minDate, dateTimePickerOptions: { format: 'L', showClear: true }"> 
 
            <input type="text" class="form-control" /> 
 
            <div class="input-group-addon"> 
 
             <i class="glyphicon glyphicon-calendar"></i> 
 
            </div> 
 
           </div> 
 
</div> 
 
<div class="form-group"> 
 
<label class="control-label">Fecha Inicio:</label> 
 
<div class="input-group" data-bind="dateTimePicker: NuevaTarea.FechaInicio, dateTimePickerOptions: { format: 'L', showClear: true }, minDate: NuevaTarea.minDate, maxDate: NuevaTarea.maxDate"> 
 
            <input type="text" class="form-control" /> 
 
            <div class="input-group-addon"> 
 
             <i class="glyphicon glyphicon-calendar"></i> 
 
            </div> 
 
           </div> 
 
</div>

Answer 2

Vielen Dank für Ihre Hilfe, aber ich schon gerade erst gesetzt, useCurrent gelöst: false Optionen.