JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" id="start_date" />
<input type="text" id="end_date" />
JavaScript
// To set mindate in enddate
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
function customRange(input)
{
return {
minDate: (input.id == "end_date" ? $("#start_date").datepicker("getDate") : new Date())
};
}
var unavailableDates = ["31-5-2014", "1-6-2014", "2-6-2014", "3-6-2014"];
// To set maxdate in startdate
function customRangeStart(input)
{
return {
maxDate:(input.id == "start_date" ? $("#end_date").datepicker("getDate") : null)
};
}
$(document).ready(function() {
$('#start_date').datepicker(
{
beforeShow: customRangeStart,
beforeShowDay: unavailable,
minDate: 0,
dateFormat: "yy-mm-dd",
changeYear: true
});
$('#end_date').datepicker(
{
beforeShow: customRange,
beforeShowDay: unavailable,
dateFormat: "yy-mm-dd",
changeYear: true
});
});