JSFiddle - React, Tailwind, and code Playground

by Eric Howe

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<div class="wrapper">
    <input>
</div>

CSS

.wrapper {
    padding: 10px;
}
td.red span.ui-state-default {
    color: #f00;
}
td.green span.ui-state-default {
    color: #0f0;
}

JavaScript

$('input').datepicker({
    dateFormat: "yy-mm-dd",
    minDate: "-0d",
    maxDate: "+90d",
    firstDay: 0,
    beforeShowDay: noWeekendsOrHolidaysOrBlockedDates
});

function noWeekendsOrHolidaysOrBlockedDates(date) {
    //var noWeekend = jQuery.datepicker.noWeekends(date);
    return setHoliDays(date);
}

// set holidays function which is configured in beforeShowDay


function setHoliDays(date) {
    var day = date.getDay();
    if(day == 5 || day == 6)
        return [false, ''];
    if(date.getDate() == 11 || date.getDate() == 23)
        return [ false, 'holiday red', 'Red!' ];
    if(date.getDate() == 12 || date.getDate() == 22)
        return [ false, 'holiday green', 'Green!' ];
    return [true, ''];
}