JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.2.0.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<label>Check-in:</label>
<input type="date" id="checkIn" data-bind="datepicker: checkIn, datepickerOptions: {
    minDate: 0,
    dateFormat: 'dd/mm/yy', 
    firstDay: 1
    }" />
<br/>
<br/>

<label>Check-out:</label>
<input type="date" id="checkOut" data-bind="{datepicker: checkOut, datepickerOptions: {
    minDate: 0,
    dateFormat: 'dd/mm/yy', 
    firstDay: 1
    },
minDate: checkIn}" />

JavaScript

ViewModel= function () {
    var self = this;
    self.checkIn = ko.observable(addDays(new Date(), 1));
    self.checkOut = ko.observable(addDays(new Date(), 2));
    
    //self.checkIn.subscribe(function(newValue) {
    //    $("#checkOut").datepicker("option", "minDate", self.checkIn());
//    });
};

ko.bindingHandlers.minDate = {
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
        current = $(element).datepicker("option", "minDate", value);
    }        
}

ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        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");
        });

    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            current = $(element).datepicker("getDate");

        if (value - current !== 0) {
            $(element).datepicker("setDate", value);
        }
    }
};

addDays = function (date, days) {
    return new Date(date.getTime() + days * oneDay);
};

oneDay = 1000 * 60 * 60 * 24;

ko.applyBindings(new ViewModel());