JSFiddle - React, Tailwind, and code Playground

by Bhumika107

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.js"></script>
From <input data-provide="datepicker" id="results_enter_fromdate"> to <input data-provide="datepicker2" id="results_enter_todate">

JavaScript

$(document).ready(function () {
$('.datepicker').datepicker();
        var nowTemp = new Date();
        var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

        var checkin = $('#results_enter_fromdate').datepicker({
            onRender: function (date) {
                return date.valueOf() < now.valueOf() ? 'disabled' : '';
            }
        }).on('changeDate', function (ev) {
            if (ev.date.valueOf() > checkout.date.valueOf()) {
                var newDate = new Date(ev.date)
                newDate.setDate(newDate.getDate() + 1);
                checkout.setValue(newDate);
            }
            checkin.hide();
            $('#results_enter_todate')[0].focus();
        }).data('datepicker');
        
        var checkout = $('#results_enter_todate').datepicker({
            onRender: function (date) {
                return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
            }
        }).on('changeDate blur', function (ev) {
            checkout.hide();
            //something here would run in all three scenarios, but
            //including 'blur' above breaks the ability to enter the todate
            //to anything besides the data immediately after the fromdate
        }).data('datepicker2');
    });