JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<input type='text' id='datepicker'>
JavaScript
var availableDates = ["09/04/2018", "09/05/2018", "09/06/2018", "08/31/2018", "09/01/2018"],
holidays_dates = { "09/02/2018": "sgsdf", "05/27/2018": "home sick", "08/20/2018": "fcg", "05/26/2018": "i dont know", "05/25/2018": "home sick"},
disabledDates = [];
//This is demo to show today is disabled.
var date = new Date();
var month = (date.getMonth()+1);
var day = date.getDate();
var year = date.getFullYear();
// if month is single digit ie 3 then add 0 infront of month
if(month.toString().length == 1){
month = '0'+month.toString();
}
// if day is single digit ie 3 then add 0 infront of day
if(day.toString().length == 1){
day = '0'+ day.toString();
}
var today = month +'/'+ day +'/'+ year;
holidays_dates[today] = "Disabled Date";
function available(date) {
var moth = String(date.getMonth() + 1);
if (moth.length == 1) {
moth = "0" + moth;
}
var dat = String(date.getDate());
if (dat.length == 1) {
dat = "0" + dat;
}
dmy = moth + "/" + dat + "/" + date.getFullYear();
if ($.inArray(dmy, availableDates) != -1) {
return [true, ""];
} else if (dmy in holidays_dates) {
console.log(dmy)
return [false, "Highlighted", holidays_dates[dmy]];
} else {
return [false, ""];
}
}
//this function gets the dates from holidays_dates and makes array of disabled dates.
function disabled(){
for(var date in holidays_dates){
disabledDates.push(date);
}
}
disabled();
$("#datepicker").datepicker({
beforeShowDay: function (date) {
var formattedDate = $.datepicker.formatDate('mm/dd/yy', date),
checkDisable = disabledDates.indexOf(formattedDate) == -1;
//console.log(formattedDate);
if(checkDisable == true){
console.log('in if')
return [checkDisable];
}else{
console.log('in else')
//add ui-datepicker-unselectable class to the disabled date.
return...