JSFiddle - React, Tailwind, and code Playground

by Trevor Dowdle

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<input type="text" id='datepicker'>

CSS

body {
    font-family:Arial;
    font-size : 10pt;
    padding:5px;
}
.Highlighted a {
    background-color : red !important;
    background-image : none !important;
    color: White !important;
    font-weight: bold !important;
    font-size: 12pt;
}

JavaScript

$(document).ready(function () {
    var currentDay = new Date();
    var dayOfWeek;
    var highlighted = 0;
    var count = 0;
    var SelectedDates = {};
    
    while(highlighted < 3){
       dayOfWeek = currentDay.getDay();
        if(dayOfWeek != 0 && dayOfWeek != 6){
            if(count > 2){
                alert(currentDay);
                var month = currentDay.getMonth()+1;
		        if(month.toString().length < 2)
			        month = '0'+month;
	            var day = currentDay.getDate();
		        if(day.toString().length < 2)
			        day = '0'+day;
	            var year = currentDay.getFullYear();
                var dateStr = month+"/"+day+"/"+year;   
                SelectedDates[new Date(dateStr)] = new Date(dateStr);
                highlighted++;
            }
            else {
                count++;    
            }
        }
        currentDay = new Date(currentDay.getTime() + (24 * 60 * 60 * 1000));    
    }
    
    $('#datepicker').datepicker({
        minDate: 2,
        maxDate: "+4M +15D",
        beforeShowDay: function (date) {
            var Highlight = SelectedDates[date];
            if (Highlight) {
                return [true, "Highlighted", Highlight];
            } else {
                return [true, '', ''];
            }
        }
    });
});