JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" id="datepicker" />
CSS
.highlightDay .ui-state-default {
background: #484;
color: #FFF;
}
JavaScript
$(document).ready(function() {
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var newDate = addDays(new Date(), 1);
var thirdDay = addDays(new Date(), 4);
return [date.getDay() !== 0, date >= newDate && date <= thirdDay ? "highlightDay" : ""];
},
getNextDayOfWeek : function (date, dayOfWeek) {
debugger;
// Code to check that date and dayOfWeek are valid left as an exercise ;)
var resultDate = new Date(date.getTime());
resultDate.setDate(date.getDate() + (7 + dayOfWeek - date.getDay()) % 7);
return resultDate;
},
minDate: 1
});
});
function addDays(theDate, days) {
return new Date(theDate.getTime() + days*24*60*60*1000);
}