JSFiddle - React, Tailwind, and code Playground

by Ahmad Ginanjar

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/mint-choc/jquery-ui.css">
<div>
    <p id="starDate">Start Date:
        <input type="text" class="startDate" />
    </p>
    <p id="endDate">End Date:
        <input type="text" class="endDate" />
    </p>
</div>

CSS

/*
    Add custom styling or use existing jQuery UI themes

    REFERENCE: jQuery UI themes, http://blog.jqueryui.com/
*/
#endDate {
    display: none;
}

JavaScript

$(function () {
    $(".startDate").datepicker({
        changeMonth: true,
        changeYear: true,
        onClose: function () {
            $("#endDate").show("slow");
            $(".endDate").datepicker("option", "minDate", "today");
            $(".endDate").datepicker("option", "maxDate", 2);
        }
    });

    $(".endDate").datepicker();
});