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="text: 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 cur = new Date(),
                rush_date = cur.setDate(cur.getDate() + 30);
            if (dd < rush_date) {
                self.request_due_date_rush(true);
            }
        });
    };
    ko.applyBindings(new viewModel());
});