JSFiddle - React, Tailwind, and code Playground

by hiteshbhilai2010

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<p>Choose your dates.</p><br/>
Start Date <input type="text" id="arr_date"><br/>
End Date   <input type="text" id="dep_date"><br/>
No of Days       <input type="text" id="num_nights" readonly>

JavaScript

function showDays() {
    var start = $('#arr_date').datepicker('getDate');
    var end = $('#dep_date').datepicker('getDate');
    if (!start || !end) return;
    var days = (end - start) / 1000 / 60 / 60 / 24;
    $('#num_nights').val(days);
}

$("#arr_date").datepicker({
    dateFormat: 'dd-mm-yy',
    onSelect: showDays,
     onClose: function( selectedDate ) {
         var dParts = selectedDate.split('-');
         var in30Days = new Date(dParts[2] + '/' +
                        dParts[1] + '/' +
                        (+dParts[0] + 30)
               );
        
    $( "#dep_date" ).datepicker( "option", "minDate", in30Days );
    }
});
$("#dep_date").datepicker({
    dateFormat: 'dd-mm-yy',
    onSelect: showDays,
     
});