JSFiddle - React, Tailwind, and code Playground

by PeppeDotNet

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<input type="text" data-bind="datepicker: Date, pickerOptions: { minDate: new Date() }" />
<button data-bind="click: ResetDate">Reset</button>
<hr />
<span data-bind="text: Date" />

JavaScript

/**************************************
** Code created by Giuseppe Marchi
** Dev4Side S.r.l.
** giuseppe.marchi@dev4side.com
** www.dev4side.com
** www.peppedotnet.it
**
**************************************/

window.D4S = window.D4S || {};

D4S.ViewModel = function() {
    var self = this;
    
    self.Date = ko.observable(new Date());  
    self.ResetDate = function() {
        self.Date(new Date());
    };
};

ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var options = allBindingsAccessor().pickerOptions || {};
        $(element).datepicker(options);
        ko.utils.registerEventHandler(element, "change", function () {
            var observable = valueAccessor();
            observable($(element).datepicker("getDate"));
        });
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).datepicker("destroy");
        });
    },
    update: function (element, valueAccessor) {
        var newValue = ko.utils.unwrapObservable(valueAccessor());
        var oldValue = $(element).datepicker("getDate");
        if (newValue - oldValue !== 0) {
            $(element).datepicker("setDate", newValue);
        }
    }
};

$(document).ready(function () {
    var model = new D4S.ViewModel();
    ko.applyBindings(model);
});