JSFiddle - React, Tailwind, and code Playground

by Jaikrat Tariyal

HTML

<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker3.css">
<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/locales/bootstrap-datepicker.en-GB.js"></script>
<input id="dpd1" type="text" type="text" class="form-control date">
<input type="text" class="form-control date" id="dpd2"/>

JavaScript

$('input.date').datepicker({
    startDate: "01/06/2015",
    clearBtn: false,
    todayHighlight: true,
    autoclose: true,
});

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) {    
    var newDate = new Date(ev.date);
    newDate.setDate(newDate.getDate() + 1);
    
    var $datepicker = $("#dpd2")
    $datepicker.datepicker();    
    $datepicker.datepicker('setStartDate', newDate);
    
    //checkout.setValue("01/10/2015");    
    //$("#dpd2").datepicker('setDate', new Date());
    checkin.hide();
    $('#dpd2').focus();
}).data('datepicker');

var checkout = $('#dpd2').datepicker({
    onRender: function(date) {
        return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
    }
}).on('changeDate', function(ev) {
    checkout.hide();
}).data('datepicker');