JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="start_date" />
<input type="text" id="end_date" />

JavaScript

// To set mindate in enddate
function unavailable(date) {
    dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
    if ($.inArray(dmy, unavailableDates) == -1) {
        return [true, ""];
    } else {
        return [false, "", "Unavailable"];
    }
}

function customRange(input) {
    return {
        minDate: (input.id == "end_date" ? $("#start_date").datepicker("getDate") : new Date())
    };
}
var unavailableDates = ["31-5-2014", "1-6-2014", "2-6-2014", "3-6-2014"];

// To set maxdate in startdate
function customRangeStart(input) {
    return {
        maxDate: (input.id == "start_date" ? $("#end_date").datepicker("getDate") : null)
    };
}

function validateDateRange() {

    var txtStartDate = $("#start_date");
    var txtEndDate = $("#end_date");
    var startDate;
    var endDate;
    var tempDate;

    if (txtStartDate.val() == "") 
        return false;

    if (txtEndDate.val() == "") 
        return false;

    startDate = new Date(txtStartDate.val());
    endDate = new Date(txtEndDate.val());
    
    for (i = 0; i < unavailableDates.length; i++) {
        var temp = unavailableDates[i].split("-");

        tempDate = new Date(temp[2], temp[1]-1, temp[0]);
        
        if (startDate < tempDate && endDate > tempDate) {
            alert("Invalid Date Range");
            return false;
        }
    }
}



$(document).ready(function () {

    $('#start_date').on("change", validateDateRange).datepicker({
        beforeShow: customRangeStart,
        beforeShowDay: unavailable,
        dateFormat: "yy-mm-dd",
        changeYear: true
    });

    $('#end_date').on("change", validateDateRange).datepicker({
        beforeShow: customRange,
        beforeShowDay: unavailable,
        dateFormat: "yy-mm-dd",
        changeYear: true
    });
});