JSFiddle - React, Tailwind, and code Playground

by Saeed Abbaspour

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<div>Due Date:
    <input id="datepicker" data-bind="value: request_due_date" type="text" />
</div>
<div data-bind="visible: request_due_date_rush">Reason For Rush:
    <input data-bind="text: request_due_date_rush_reason" />
</div>

JavaScript

$(document).ready(function () {
    $("#datepicker").datepicker();
});

$(document).ready(function () {

    var viewModel = function () {
        var self = this;
        self.request_due_date = ko.observable();
        self.request_due_date_rush = ko.observable(false);
        self.request_due_date_rush_reason = ko.observable();

        self.request_due_date.subscribe(function (dd) {  
            var date1 = new Date(dd);
            var date2 = new Date();
            var timeDiff = Math.abs(date2.getTime() - date1.getTime());
            var days = Math.ceil(timeDiff / (1000 * 3600 * 24)); 

            self.request_due_date_rush(days < 30);
        });
    };
    ko.applyBindings(new viewModel());
});