JSFiddle - React, Tailwind, and code Playground

by neonms92

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.css">
<div data-bind="foreach: dateSets">
    <select data-bind="value: selectedValue, enable: !disableSelect()">
        <option value="">Select...</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
    <input type="text" class="start" data-bind="datepicker: formattedStartDate, enable: ! disableStart()"/>
    <input type="text" class="end" data-bind="datepicker: formattedEndDate, enabled: !disableEnd()"/>
    <br/>
</div>

JavaScript

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());
        
        //handle date data coming via json from Microsoft
        if (String(value).indexOf('/Date(') == 0) {
            value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
        }
        
        var current = $(element).datepicker("getDate");
        
        if (value - current !== 0) {
            $(element).datepicker("setDate", value);
        }
    }
};

function DateSet() {
    var self = this;
    self.selectedValue = ko.observable('');
    self.disableSelect = ko.observable(false);
    self.selectedValue.subscribe(function() {
        self.disableSelect(true);
        setTimeout(function() {
            self.disableSelect(false);
        },1000);
    });
    self.start = ko.observable();
    self.disableStart = ko.observable(false);
    self.start.subscribe(function() {
        self.disableStart(true);
        setTimeout(function() {
            self.disableStart(false);
        },1000);
    });
    self.end = ko.observable();
    self.disableEnd = ko.observable(false);
    self.end.subscribe(function() {
        self.disableEnd(true);
        setTimeout(function() {
           ...