Restrict Date Range in jQuery UI DatePicker for two dates

Restrict Date Range in jQuery UI DatePicker for two dates

by george_black

HTML

<br/>From:
<input type="text" id="txtFromDate" />To:
<input type="text" id="txtToDate" />

CSS

body {
    font-size:10pt;
    font-family:Calibri;
    padding: 5px;
}

JavaScript

$(document).ready(function () {
    var daysToAdd = 4;
    $("#txtFromDate").datepicker({
        onSelect: function (selected) {
            var dtMax = new Date(selectedDate);
            dtMax.setDate(dtMax.getDate() + daysToAdd); 
            var dd = dtMax.getDate();
            var mm = dtMax.getMonth() + 1;
            var y = dtMax.getFullYear();
            var dtFormatted = mm + '/'+ dd + '/'+ y;
            $("#txtToDate").datepicker("option", "minDate", dtFormatted);
        }
    });
    
    $("#txtToDate").datepicker({
        onSelect: function (selected) {
            var dtMax = new Date(selected);
            dtMax.setDate(dtMax.getDate() - daysToAdd); 
            var dd = dtMax.getDate();
            var mm = dtMax.getMonth() + 1;
            var y = dtMax.getFullYear();
            var dtFormatted = mm + '/'+ dd + '/'+ y;
            $("#txtFromDate").datepicker("option", "maxDate", dtFormatted)
        }
    });
});