JSFiddle - React, Tailwind, and code Playground

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