JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/Aymkdn/Datepicker-for-Bootstrap/master/bootstrap-datepicker.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js"></script>
<link rel="stylesheet" href="https://raw.github.com/Aymkdn/Datepicker-for-Bootstrap/master/datepicker.css">
<div id='target'>
<input data-bind='datepicker: test_date' type="date" />
</div>
CSS
#target {
margin: 2em;
}
JavaScript
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) {}
};
var model = {
test_date: ko.observable('2012-12-12')
};
ko.applyBindings(model, $("#target")[0]);