Bootstrap Datepicker Bindung in Knockoutjs

Question

Ich bin mit Bootstrap-Datepicker und Bindung das ausgewählte Datum mit knockoutjs in einer asp.net Mvc-Anwendung

Knockout Bindung:

ko.bindingHandlers.datepicker = { 
     init: function(element, valueAccessor, allBindingsAccessor) { 
      //initialize datepicker with some optional options 
      var options = allBindingsAccessor().datepickerOptions || { 
       useCurrent: false, 
       format: 'mm/dd/yyyy' 
      }; 
      $(element).datepicker(options); 

      //when a user changes the date, update the view model 
      ko.utils.registerEventHandler(element, "changeDate", function(event) { 
       var value = valueAccessor(); 
       if (ko.isObservable(value)) { 
        value(event.date); 
       } 
      }); 
     }, 
     update: function(element, valueAccessor) { 
      var widget = $(element).data("datepicker"); 
      //when the view model is updated, update the widget 
      if (widget) { 
       widget.date = ko.utils.unwrapObservable(valueAccessor()); 
       widget.setValue(); 
      } 
     } 
}; 

var model = { 
    StartDate: ko.observable(), 
    EndDate: ko.observable() 
}; 

ko.applyBindings(model, $("#target")[0]); 

Jsfiddle of what I have done.

Gerade jetzt, Nach dem Ausfüllen des Formulars wird das Formular unter Verwendung von Ajax-Post an den Server gesendet.

Bei der Rückkehr möchte ich die ausgewählten Start- und Enddaten Eingabefelder löschen.

Ich habe dies versucht:

self.StartDate(null); 
self.EndDate(null); 

dies die Eigenschaften löscht, aber der Eingang noch immer die ausgewählten Daten. Gibt es eine Möglichkeit, nicht nur die Eigenschaften, sondern auch die Eingabewerte zu löschen?

Gibt es in der knockout-Funktion für die benutzerdefinierte Bindungsinitialisierung auch eine Möglichkeit, beide Datumseingaben zu verknüpfen, um einen Bereich zu erstellen, wie die Demo here? Wenn in der Demo das Optionsfeld Bereich ausgewählt ist, funktionieren die Felder jedoch als Bereich.

Answer 1

folgende Kasperoo Vorschlag:

Dies zu ändern ist:

update: function(element, valueAccessor) { 
     var widget = $(element).data("datepicker"); 

     if (widget) { 
      widget.date = ko.utils.unwrapObservable(valueAccessor()); 
      widget.setValue(); 
     } 
    } 

zu

update: function(element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     $(element).val(value); 
    } 

half, die Felder auf Server-Post zurück zu löschen.

Answer 2

Sieht so aus, als ob Sie diese Bootstrap datepicker verwenden und der API-Aufruf das Widget-Datum auf das KO-Datum setzt, wenn das Löschen (oder Festlegen eines Datums über KO) in der Binder-Funktion update nicht korrekt ist.

Dies funktioniert (siehe JSFiddle):

$(element).datepicker("update", ko.utils.unwrapObservable(valueAccessor()));