JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<div data-bind="with: SubViewModel">
<input id="fisttextbox" data-bind="datepicker: Filter().From"/>
<span data-bind="text: Filter().From"></span>
</div>
<div>
<input id="secondtextbox" data-bind="datepicker: SubViewModel().Filter().From"/>
<span data-bind="text: SubViewModel().Filter().From"></span>
</div>
JavaScript
function Filter() {
var self = this;
self.From = ko.observable("");
}
function SubViewModel() {
var self = this;
self.Filter = ko.observable(new Filter());
}
function ViewModel() {
var self = this;
self.SubViewModel = ko.observable(new SubViewModel());
}
var dateTimePickerOptions = {
changeMonth: true,
changeYear: true,
dateFormat: "dd.mm.yy",
showWeek: true
};
ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
$.datepicker.setDefaults({ dateFormat: 'yy-mm-dd' });
var options = allBindingsAccessor().datepickerOptions || dateTimePickerOptions;
$(element).datepicker(options);
//handle the field changing
ko.utils.registerEventHandler(element, "change", function () {
var observable = valueAccessor();
observable($.datepicker.formatDate($(element).datepicker('option', 'dateFormat'), $(element).datepicker("getDate")));
});
//handle disposal (if KO removes by the template binding)
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).datepicker("destroy");
});
},
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
$(element).datepicker("setDate", value);
}
};
var vm = new ViewModel();
ko.applyBindings(vm);