JSFiddle - React, Tailwind, and code Playground

by pravinnavle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="input-group input-append date" id="dateRangePicker">
    <input type="text" id="date" class="form-control" name="date" />
    <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>

JavaScript

$(document).ready(function(){
initComponent();
});

function initComponent()
{
var dt = new Date();
var yr = dt.getFullYear();
dateArr = ['12-05-'+yr,'12-11-'+yr];
$('#date').datepicker({
dateFormat: 'mm-dd-yy',
    beforeShowDay: function(d) {
        var dmy = (d.getMonth()+1)
        if(d.getMonth()<9) 
            dmy="0"+dmy; 
        dmy+= "-"; 

        if(d.getDate()<10) dmy+="0"; 
            dmy+=d.getDate() + "-" + d.getFullYear(); 
        if ($.inArray(dmy, dateArr) != -1) {
            return [true, "","Available"]; 
        } else{
             return [false,"","unAvailable"]; 
        }
    },
    todayBtn: "linked",
    autoclose: true,
    todayHighlight: true
    });


}