JSFiddle - React, Tailwind, and code Playground

by Jim Lloyd

HTML

Please select date: <input type="text" id="datepicker" />

JavaScript

var RangeDates = ["4/1/2017, 6/30/2017", "11/1/2017, 12/31/2017", "4/1/2018, 6/30/2018", "11/1/2018, 12/31/2018", "4/1/2019, 6/30/2019", "11/1/2019, 12/31/2019",];
var RangeDatesIsDisable = true;
function DisableDays(date) {
    var isd = RangeDatesIsDisable;
    var rd = RangeDates;
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    for (i = 0; i < rd.length; i++) {
        var ds = rd[i].split(',');
        var di, df;
        var d1, m1, y1, d2, m2, y2;

        if (ds.length == 1) {
            di = ds[0].split('/');
            d1 = parseInt(di[1]);
            m1 = parseInt(di[0]);
            y1 = parseInt(di[2]);
            if (y1 == y && m1 == (m + 1) && d1 == d) return [!isd];
        } else if (ds.length > 1) {
            di = ds[0].split('/');
            df = ds[1].split('/');
            d1 = parseInt(di[1]);
            m1 = parseInt(di[0]);
            y1 = parseInt(di[2]);
            d2 = parseInt(df[1]);
            m2 = parseInt(df[0]);
            y2 = parseInt(df[2]);

            if (y1 >= y || y <= y2) {
                if ((m + 1) >= m1 && (m + 1) <= m2) {
                    if (m1 == m2) {
                        if (d >= d1 && d <= d2) return [!isd];
                    } else if (m1 == (m + 1)) {
                        if (d >= d1) return [!isd];
                    } else if (m2 == (m + 1)) {
                        if (d <= d2) return [!isd];
                    } else return [!isd];
                }
            }
        }
    }
    return [isd];
}
    $(document).ready(function() {
   $("#datepicker").datepicker({
       minDate: 0,
       maxDate: null,
       dateFormat: 'MM dd, yy',
       beforeShowDay: DisableDays
      });
});