JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<input type="text" id="startDate" />
<br /><br />
<input type="text" id="endDate" />
JavaScript
$(function() {
var iconURL = "http://jqueryui.com/demos/"+
"datepicker/images/calendar.gif";
$.datepicker.setDefaults({
showOn: 'both',
buttonImage: iconURL,
buttonImageOnly: true
});
$('#startDate').datepicker({
onSelect: function(dateStr) {
$('#endDate').datepicker('option', 'minDate', $(this).datepicker('getDate'));
},
onClose: function () {
iTxtCheckInCurrentMonth = -1
iTxtCheckOutCurrentMonth = 1
try {
$("#endDate").click();
} catch (e) { alert('Please select check-in date.') }
},
});
$('#endDate').datepicker({
onSelect: function(dateStr) {
$('#startDate').datepicker('option', 'maxDate', $(this).datepicker('getDate'));
}
});
});