JSFiddle - React, Tailwind, and code Playground

by isherwood

HTML

<form action="tba.php" method="post" id="bookform" name="bookform">
    <table cellspacing="3px" width="100%" border="0">
        <tr>
            <td align="right">
<b>Arrival Date: </b>

            </td>
            <td>
                <input name="ArrivalDate" id="ArrivalDate" size="10">
            </td>
        </tr>
        <tr>
            <td align="right">
<b>Departure Date: </b>

            </td>
            <td>
                <input name="DepartureDate" id="DepartureDate" size="10">
            </td>
        </tr>
    </table>
    <div id="numnights" style="display:none">
        <table cellspacing="3px" width="100%" border="0">
            <tr>
                <td align="right" width="48.5%">&nbsp;</td>
                <td>That's <span id="nights"></span> nights in total</td>
            </tr>
        </table>
    </div>
</form>

JavaScript

$(document).ready(function () {
    
    //jQuery UI datepicker
    $("#ArrivalDate").datepicker({
        dateFormat: "d M yy",
        minDate: 0,
        showOtherMonths: true,
        selectOtherMonths: true,
        onClose: function () {
            var DepDate = $('#DepartureDate');
            var limitDate = $(this).datepicker('getDate');
            //add 1 day to Arrival Date
            limitDate.setDate(limitDate.getDate() + 1);
            DepDate.datepicker('option', 'minDate', limitDate);
            $(this).datepicker('option', 'minDate', minDate);
        }
    });
    
    $('#DepartureDate').datepicker({
        dateFormat: "d M yy",
        showOtherMonths: true,
        selectOtherMonths: true
    });

    //Reveal number of nights
    $("#DepartureDate").on("change", function () {
        var arr_date = $("#ArrivalDate").datepicker('getDate');
        var dep_date = $("#DepartureDate").datepicker('getDate');
        var diff = Math.floor((dep_date.getTime() - arr_date.getTime()) / 86400000);
        $('#nights').val(diff);
        $("#numnights").hide().slideDown(1200);
    });
});