JSFiddle - React, Tailwind, and code Playground

by Amitabha Ghosh

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">

CSS

.dp-highlight .ui-state-default {
		background: #FAAE2A;
		color: #FFF;
	}

JavaScript

$(function() {
        dpmode='';
        var startDate='0';
        var endDate='0';
        $( "#from" ).datepicker({
            minDate: 0,
            dateFormat:"yy-mm-dd",
            changeMonth: true,
            numberOfMonths: 1,
            beforeShow:function(input, calendar){
                menuLocked=true;
                dpmode='depart';
            },
            beforeShowDay: function(date) {
                var date1 = $.datepicker.parseDate("yy-mm-dd", $("#from").val());
                var date2 = $.datepicker.parseDate("yy-mm-dd", $("#to").val());
                return [true, date1 && date2 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
 
            },
            onClose: function( selectedDate ) {
                $( "#to" ).datepicker( "option", "minDate", selectedDate );
                $('#to').datepicker('show');
                startDate = selectedDate;
            }
        });
        $( "#to" ).datepicker({
            dateFormat:"yy-mm-dd",
            minDate:2,
            setDate: new Date(),
            changeMonth: true,
            numberOfMonths: 1,
            beforeShow:function(){
                dpmode='return'; 
            },
            beforeShowDay: function(date) {
                var date1 = $.datepicker.parseDate("yy-mm-dd", $("#from").val());
                var date2 = $.datepicker.parseDate("yy-mm-dd", $("#to").val());
                return [true, date1 && date2 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
            },
            onClose: function( selectedDate ) {
                $( "#from" ).datepicker( "option", "maxDate", selectedDate );
                endDate = selectedDate;
            }
        });
 
        $('#ui-datepicker-div').delegate('.ui-datepicker-calendar td', 'mouseover', function() {
            if ($(this).data('year')==undefined)return;
            if...