jQuery UI datepicker avec Knockout.js

Je joue avec knockout.js pour append et supprimer des champs dans un formulaire. Jusqu’à présent, cela fonctionne bien, mais j’ai besoin d’une option datepicker. J’ai donc utilisé l’interface utilisateur datePicker de jQuery. Cela fonctionne, mais seulement au tout premier datepicker, pas ailleurs. Donc, chaque fois que je clique sur “Ajouter”, je reçois de nouveaux champs, mais pas de datepicker.

J’ai cherché sur StogExchange sur Google , mais je n’ai pas trouvé de solution pour la copie de champs.

HTML

 0'> 
 
 
Beschikkingsdatum
 
Beschikkingsnr
 
 
 
 
 
 
 
 
 
Delete
 
 
  

Knockout.JS

• JavaScript: jQuery Datepicker – mise en évidence simple de jours spécifiques, qui peut vous aider? (source à l’intérieur)
• Comment contrôler le positionnement de jQueryUI datepicker
• Désactiver tous les dimanches dans le calendrier de l’interface utilisateur jQuery
• jQuery UI Datepicker: comment append des événements cliquables à des dates particulières?
• Comment utiliser Datepicker dans Django

 var beschikkingModel = function(beschikkingen) { var self = this; self.beschikkingen = ko.observableArray(beschikkingen); self.addbeschikking = function() { self.beschikkingen.push({ beschikkingsdatum: "", beschikkingsnummer: "" }); }; self.removebeschikking = function(beschikking) { self.beschikkingen.remove(beschikking); }; self.save = function(form) { alert("Could now transmit to server: " + ko.utils.ssortingngifyJson(self.beschikkingen)); // To actually transmit to server as a regular form post, write this: ko.utils.postJson($("form")[0], self.beschikkingen); }; }; var viewModel = new beschikkingModel([ { beschikkingsdatum: "", beschikkingsnummer: "" } ]); ko.applyBindings(viewModel); // Activate jQuery Validation $("form").validate({ submitHandler: viewModel.save }); //]]> 

Sélecteur de date

 $(window).load(function(){ $('.beschikkingsdatum').datepicker({ dateFormat: 'dd-mm-yy', constrainInput: false }); }); 

• Le sélecteur de date jQuery ne bouge pas avec le défilement de page
• Comment obtenir une date, un mois et une année dans datePicker de jQuery UI?
• JQuery UI Datepicker, inverser l’ordre de l’année dans les listes déroulantes
• Jquery UI Datepicker ne pas afficher
• Comment puis-je activer la validation jQuery sur les champs en lecture seule?

 ko.bindingHandlers.datepicker = { init: function (element, valueAccessor, allBindingsAccessor) { var options = allBindingsAccessor().datepickerOptions || {}; $(element).datepicker(options); //handle the field changing ko.utils.registerEventHandler(element, "change", function () { var observable = valueAccessor(); observable($(element).datepicker("getDate")); }); //handle disposal (if KO removes by the template binding) ko.utils.domNodeDisposal.addDisposeCallback(element, function () { $(element).datepicker("destroy"); }); } };