JSFiddle - React, Tailwind, and code Playground

by Terry Young

HTML

<script src="http://foundation-datepicker.peterbeno.com/example/js/foundation-datepicker.js"></script>
Check In :
<input type="text" class="span2" id="dpd1">
<br>Check Out :
<input type="text" class="span2" id="dpd2">

CSS

.datepicker.dropdown-menu {
    position:absolute;
    top:100%;
    left:0;
    z-index:1000;
    float:left;
    display:none;
    min-width:160px;
    list-style:none;
    background-color:#fff;
    border:1px solid #ccc;
    border:1px solid rgba(0, 0, 0, .2);
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    -webkit-box-shadow:0 5px 10px rgba(0, 0, 0, .2);
    -moz-box-shadow:0 5px 10px rgba(0, 0, 0, .2);
    box-shadow:0 5px 10px rgba(0, 0, 0, .2);
    -webkit-background-clip:padding-box;
    -moz-background-clip:padding;
    background-clip:padding-box;
    *border-right-width:2px;
    *border-bottom-width:2px;
    color:#333;
    font-family:"Open Sans", sans-serif;
    font-size:13px;
    line-height:18px
}
.datepicker.dropdown-menu th, .datepicker.dropdown-menu td {
    padding:4px 5px
}
.datepicker {
    display:none;
    position:absolute;
    padding:4px;
    margin-top:1px;
    direction:ltr
}
.datepicker-inline {
    width:220px
}
.datepicker-rtl {
    direction:rtl
}
.datepicker-rtl table tr td span {
    float:right
}
.datepicker-dropdown {
    top:0;
    left:0
}
.datepicker-dropdown:before {
    content:'';
    display:inline-block;
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-bottom:7px solid #ccc;
    border-bottom-color:rgba(0, 0, 0, .2);
    position:absolute;
    top:-7px;
    left:6px
}
.datepicker-dropdown:after {
    content:'';
    display:inline-block;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-bottom:6px solid #fff;
    position:absolute;
    top:-6px;
    left:7px
}
.datepicker>div {
    display:none
}
.datepicker.days div.datepicker-days {
    display:block
}
.datepicker.months div.datepicker-months {
    display:block
}
.datepicker.years div.datepicker-years {
    display:block
}
.datepicker table {
    border:0;
    margin:0
}
.datepicker td, .datepicker th {
    text-align:center;
    width:20px;
   ...

JavaScript

$(function () {

			    // implementation of disabled form fields
			    var now = new Date(),
			        today = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0),
			        tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 0, 0),
                    startDate = tomorrow;

			    var checkin = $('#dpd1').fdatepicker({
					format: 'yyyy-mm-dd',
			        onRender: function (date) {
			            //console.log(date.valueOf() < tomorrow.valueOf(), date);
			            return date.valueOf() < tomorrow.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');

                $('#dpd1').fdatepicker('setValue', [tomorrow.getFullYear(), tomorrow.getMonth(), tomorrow.getDate() + 1].join('-'));
                
			    var checkout = $('#dpd2').fdatepicker({
					format: 'yyyy-mm-dd',
  			        onRender: function (date) {
			            return date.valueOf() < checkin.date.valueOf() ? 'disabled' : '';
			        }
			    }).on('changeDate', function (ev) {
			        checkout.hide();
			    }).data('datepicker');
			});