Bootstrap Datepicker mit knockout.js Datenbank
Diese Frage ist ähnlich knockoutjs databind mit jquery-ui-datepickeraber statt der jQueryUI datepicker, ich würde gerne verwenden Sie eine der Bootstrap datepickers.
Die API für die Bootstrap-datepicker anders aus, jquery-ui, und ich bin mit einigen Schwierigkeiten Umhüllung meinem Kopf, um es mit knockout.js. Erstellt habe ich ein jsFiddle zum ausprobieren.
Scheint es, wie die Bootstrap-datepicker-könnte sein, viel einfacher zu verwenden, da es nicht selbstständig speichern das Datum. Allerdings würde ich gerne wissen, ob das jsFiddle ist der geeignete Weg, um die Verwendung der Bootstrap-datepicker-widget mit knockout.js also
ko.bindingHandlers.datepicker = {
init: function(element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || {};
$(element).datepicker(options);
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).datepicker("destroy");
});
},
update: function(element, valueAccessor) {
}
};
InformationsquelleAutor der Frage Brian M. Hunt | 2012-06-20
Du musst angemeldet sein, um einen Kommentar abzugeben.
Hier ist ein Beispiel, wie Sie können dies erreichen, mit dem datepicker, die Sie verwenden:
Sah es nicht wie es war, zu zerstören-Funktionalität, so dass ich entfernt das Stück. Dieser verarbeitet die widgets
changeDate
event zum aktualisieren der view-Modell, wenn ein Benutzer das Datum ändert. Dieupdate
Funktion behandelt, wenn der view-Modell geändert wird, aktualisieren Sie die widget.Wenn Sie möchten, binden Sie den Wert auf einen nicht beobachtbaren, dann würde es ein wenig mehr code. Lassen Sie mich wissen, wenn das ist etwas, das Sie brauchen, zu unterstützen.
http://jsfiddle.net/rniemeyer/KLpq7/
InformationsquelleAutor der Antwort RP Niemeyer
meine aktuelle version ist ein mix zwischen den bereits gezeigten Lösungen:
InformationsquelleAutor der Antwort Philipp P
Akzeptierte Antwort hat bei mir nicht funktioniert mit der aktuellen version der Datum-picker. Der Eingang war nicht initialisiert werden mit dem Wert des beobachtbaren. Ich machte eine aktualisierte verbindlich, zu dem ich fügte hinzu:
Das scheint, den trick zu tun.
Hier ist eine aktualisierte fiddle, verwendet die Letzte verfügbare Datum-picker, Bootstrap, jQuery und Knockout: http://jsfiddle.net/krainey/nxhqerxg/
Update:
Erlebte ich einige Schwierigkeiten mit der Datum-picker nicht, spielt schön mit den beobachtbaren wenn ein Benutzer Bearbeiten Sie den Wert im Textfeld manuell. Würde das tool sofort analysieren, das Datum, und stecken Sie das Ergebnis in das Eingabefeld.
Wenn der Benutzer versucht zu Bearbeiten 10/07/2014, zum Beispiel, und verwendet die Rücktaste oder die entf-um eine Zahl zu entfernen (10/0/2014), der resultierende Wert wäre analysiert und sofort in den text eingefügt-Eingang. Wenn der Wert war, für einen moment, 10/0/2014, der picker würde den Kalender schieben, 09/30/2014, und stecken Sie diesen Wert in das Textfeld ein. Wenn ich versuchte, Sie zu Bearbeiten, den Monat und das Wert war, für einen moment, 1/7/2014, der picker würde zu verlagern, 7. Januar 2014, und stecken Sie diesen Wert in das Textfeld ein.
Können Sie sehen, dass das Verhalten in dieser Fiedel:
http://jsfiddle.net/krainey/nxhqerxg/10/
Musste ich update meine Bindung mit einem speziellen handler zu erkennen, konzentrieren, und binden Sie ein one-time-blur-Ereignis, um es zu behandeln, manuelle edits korrekt.
The fiddle wird in der original-Antwort wurde aktualisiert, um dies zu reflektieren:
http://jsfiddle.net/krainey/nxhqerxg/
InformationsquelleAutor der Antwort kiprainey
Hier ist was ich landete
InformationsquelleAutor der Antwort Muhammad Amin