JSFiddle - React, Tailwind, and code Playground

by anpsmn

HTML

<script src="http://www.eyecon.ro/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="http://www.eyecon.ro/bootstrap-datepicker/css/datepicker.css">
<table class="table">
    <thead>
        <tr>
            <th>Check in:
                <input type="text" class="span2" value="" id="dpd1"></input>
            </th>
            <th>Check out:
                <input type="text" class="span2" value="" id="dpd2"></input>
            </th>
        </tr>
    </thead>
</table>

JavaScript

var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

var checkin = $('#dpd1').datepicker({
    onRender: function (date) {
        return date.valueOf() > now.valueOf() ? 'disabled' : '';
    }
}).on('changeDate', function (ev) {
    
    //made changes to condition below
    if (ev.date.valueOf() < checkout.date.valueOf()) {
        var newDate = new Date(ev.date)
        newDate.setDate(newDate.getDate() + 1);
        checkout.setValue(newDate);
    }
    checkin.hide();
    $('#dpd2')[0].focus();
}).data('datepicker');
var checkout = $('#dpd2').datepicker({
    onRender: function (date) {
       //made changes to below line

       return (date.valueOf() < now.valueOf()) && (date.valueOf()>= checkin.date.valueOf()) ? '' : 'disabled';
    }
}).on('changeDate', function (ev) {
    checkout.hide();
}).data('datepicker');