JSFiddle - React, Tailwind, and code Playground

by salman

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/smoothness/jquery-ui.css">
From date:<br>
<input type="text" id="from" name="from"><br>

To date:<br>
<input type="text" id="to" name="to"><br>

Nights:<br>
<input type="text" id="nights" name="nights">

CSS

body {
    font: 11px sans-serif;
}

JavaScript

$(function() {
    function datepicked() {
        var fromDate = $('#from').datepicker('getDate');
        var toDate = $('#to').datepicker('getDate');
        if (fromDate && toDate) {
            var difference_msec = toDate.getTime() - fromDate.getTime();
            var difference_days = difference_msec / 86400000;
            $("#nights").val(Math.ceil(difference_days));
        }
    }
    $('#from').datepicker({
        numberOfMonths: 2,
        firstDay: 1,
        dateFormat: 'DD dd-mm-yy',
        minDate: '0',
        maxDate: '+2Y',
        onSelect: function(dateStr) {
            var d1 = $(this).datepicker("getDate");
            d1.setDate(d1.getDate() + 0); // change to + 1 if necessary
            var d2 = $(this).datepicker("getDate");
            d2.setDate(d2.getDate() + 30); // change to + 29 if necessary
            $("#to").datepicker("setDate", null);
            $("#to").datepicker("option", "minDate", d1);
            $("#to").datepicker("option", "maxDate", d2);
            datepicked();
        }
    });
    $('#to').datepicker({
        numberOfMonths: 2,
        firstDay: 1,
        dateFormat: 'DD dd-mm-yy',
        minDate: '0',
        maxDate: '+2Y',
        onSelect: function(dateStr) {
            datepicked();
        }
    });
});