JSFiddle - React, Tailwind, and code Playground

by SirDerpington

HTML

From
<br>
<input type="text" id="from" class="datepicker" name="from" />
<br>
<br>To (should be +4 days from the above field)
<br>
<input type="text" id="to" class="datepicker" name="to" />
<br>
<br>This is calculation of total days
<br>
<input type="text" id="totaldays" name="days" />
<br>
<br>

JavaScript

$(function () {
        $("#from").datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 2,
            minDate: 4,
            onSelect: function (selectedDate) {
                var fromDate = new Date(selectedDate);
                var maxDate  = new Date(fromDate.setDate(fromDate.getDate() + 4));

                //$('#to').datepicker('option', 'maxDate', maxDate);
                $("#to").datepicker("option", "minDate", maxDate);
            },
            onClose: function (selectedDate) {
                totalDays();
            }
        });
        $("#to").datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 2,
            onSelect: function(selectedDate) {
                //same as #from
                //var toDate    = new Date(selectedDate);
                //var minDate   = new Date(toDate.setDate(toDate.getDate() - 4));
                //$('#from').datepicker('option', 'minDate', minDate);
                //$("#from").datepicker("option", "maxDate", selectedDate);
            },
            onClose: function (selectedDate) {
                totalDays();
            }
        });

        function totalDays() {
            var from    = $('#from').datepicker('getDate');
            var to      = $('#to').datepicker('getDate');
            var seconds = to - from;
            var days    = Math.ceil(seconds / (1000 * 3600 * 24));

            if (days >= 0 && from) {
                $('#totaldays').val(days);
            }
        }

    });