JSFiddle - React, Tailwind, and code Playground

by NunoMira

HTML

<label for=txtFromDate1><strong>Datepicker:</strong></label>
<input type="text" name="txtFromDate1" id="txtFromDate1" class="home-input" style="width:79px;" />

JavaScript

$(function() {
   
    var unavailableDates = ["2014-07-26","2014-07-27","2014-07-28","2014-07-29","2014-07-30","2014-07-31","2014-08-01","2014-07-05","2014-07-06","2014-07-07","2014-07-08","2014-07-09","2014-07-10","2014-07-11","2014-07-19","2014-07-20","2014-07-21","2014-07-22","2014-07-23","2014-07-24","2014-07-25","2014-09-20","2014-09-21","2014-09-22","2014-09-23","2014-09-24","2014-09-25","2014-09-26","2014-09-27","2014-09-28","2014-09-29","2014-09-30","2014-10-01","2014-10-02","2014-10-03","2014-08-16","2014-08-17","2014-08-18","2014-08-19","2014-08-20","2014-08-21","2014-08-22","2014-08-23","2014-08-24","2014-08-25","2014-08-26","2014-08-27","2014-08-28","2014-08-29","2014-08-30","2014-08-31","2014-09-01","2014-09-02","2014-09-03","2014-09-04","2014-09-05","2014-10-18","2014-10-19","2014-10-20","2014-10-21","2014-10-22","2014-10-23","2014-10-24"]; 
		
    function unavailable(date) {
        ymd = date.getFullYear() + "-" + ("0"+(date.getMonth()+1)).slice(-2) + "-" + ("0"+date.getDate()).slice(-2);
        
        if ($.inArray(ymd, unavailableDates) < 0 ) {
            return [true, "enabled", "Available"];
        } else {
            return [false,"disabled","Booked Out"];
	    }
    }
		
    $('#txtFromDate1').datepicker({
        beforeShowDay: unavailable, 
        editable: false,
        dateFormat: 'dd-mm-yy',
        onSelect: function(dateText){
            $("#txtFromDate1").val(dateText);
        }
    });
});