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", "13-6-2014", "3-6-2014", "12-6-2014"];
var unavailableDateObjects= convertDisabledFieldToDateObject(unavailableDates);
// 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,
onSelect: function() {
triggerOnStartSelect();
}
});
$('#end_date').datepicker(
{
beforeShow: customRange,
beforeShowDay: unavailable,
dateFormat: "yy-mm-dd",
changeYear: true,
});
});
//Convert String Date List to Date object List
function convertDisabledFieldToDateObject(diabledList) {
var dateList = [];
$.each(diabledList, function (i, singleDate) {
var parsedDate = $.datepicker.parseDate("dd-mm-yy",singleDate);
dateList.push(parsedDate);
});
//Sort date if the diabled date sets are in jumbled order
dateList.sort(function(date1, date2){
return date1 - date2;
});
return dateList;
}
//Trigger upon change event of either start or end date
function triggerOnStartSelect(){
var startDate = new Date($("#start_date").datepicker("getDate"));
var endDate = new Date($("#end_date").datepicker("getDate"));
//if required you could reset all of the default setting here //
...