JSFiddle - React, Tailwind, and code Playground

by kamal kumar tiwari

HTML

<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="http://mattkruse.com/javascript/date/date.js"></script>
<form method="post">
    <div height="100px">
<br/>
From: <input type="text" name="date_from" id="TxtFromDate" autocomplete="off" />
To: <input type="text" name="date_to" id="TxtToDate" autocomplete="off" />
    </div>
<div style="margin-top: 200px;" id="id_days"></div>
</form>

CSS

body
{
    font-size:8pt;
    font-family:Verdana;
    padding: 5px;
    height:150px;
}
#id_days
{
    width:100px;
    height:30px;
    border:#000;
    background:#fff;
    margin:20px 0px 0px 30px;
    color:#000;
	font-size:18px;
}

JavaScript

$(document).ready(function(){

    $("#TxtFromDate").datepicker({ 
        minDate: 0,
        maxDate:"+60D",
        numberOfMonths: 1,
        onSelect: function(selected,evnt) {
            var newDate=new Date($('#TxtFromDate').val());
            $("#TxtToDate").datepicker("destroy");
            $("#TxtToDate").datepicker({
                minDate: newDate,
                maxDate: "+60D",
                numberOfMonths: 1,
                onSelect: function(selected,evnt) {
                    var maxdate=new Date($('#TxtToDate').val());
                    var mindate=new Date($('#TxtFromDate').val());
                    var difference_ms=maxdate-mindate;
                    var days = Math.floor(difference_ms/(1000*60*60*24));
                    $('#id_days').empty();
                    $('#id_days').append("Diff date is: " + days).show();
                }
            });
        }
    })
});