JSFiddle - React, Tailwind, and code Playground

by brettwgreen

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
Note: Enable console to see the observable changing
<br /><br />

Due Date: <input class="datepicker" data-bind="myDatepicker : taskDueDate" />

JavaScript

ko.bindingHandlers.myDatepicker =  {
    init: function(element, valueAccessor) {
        var unwrappedObs = valueAccessor();
        $(element).val(ko.unwrap(unwrappedObs));
        $(element).datepicker({
           changeMonth: true,
           changeYear: true
        });
        ko.utils.registerEventHandler(element, "change", function () {
            var unwrappedObs = valueAccessor(),
    		val = $(element).datepicker("getDate");
            unwrappedObs(val);
        });
    } 
};

var vm = function() {
    var self = this;
    self.taskDueDate = ko.observable('3/31/2015');
    self.taskDueDate.subscribe(function(val) {
        console.log("New value: " + val);
    });
}

ko.applyBindings(new vm());