CODEWITHSUNDEEP
javascriptjquerydatepicker
Maverick
Maverick

Reputation: 2032

Disable the dates in Jquery DatePicker

I am loading the DatePicker in specified range from DB Date value.

HTML Code is:

<div id="datepicker"> Select the Dates:
    <input type="text" id="input1" >
    <input type="text" id="input2">
</div>

JQuery Code:

var date1 = new Date(Date.parse(SSD));
var date2 = new Date(Date.parse(SED));

$("#input1").val($.datepicker.formatDate($.datepicker._defaults.dateFormat, date1));
$("#input2").val($.datepicker.formatDate($.datepicker._defaults.dateFormat, date2));

$("#datepicker").datepicker({
    defaultDate: date1,
    beforeShowDay: function (date) {
        var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
        var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
        return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
    },
    onSelect: function (dateText, inst) {
        var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
        var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
        if (!date1 || date2) {
            $("#input1").val(dateText);
            $("#input2").val("");
            $(this).datepicker("option", "minDate", dateText);
        } else {
            $("#input2").val(dateText);
            $(this).datepicker("option", "minDate", null);
        }
    }
});

It shows me the calender in this range. But now requirement is that end user can not go beyond the specified date. User can select in the specified range only. User can not navigate beyond the range. I am bit new to jquery, Please suggest.

Upvotes: 1

Views: 162

Answers (1)

Gopherkhan
Gopherkhan

Reputation: 4342

You want to limit the min and max dates with:

$( ".selector" ).datepicker({ minDate: new Date(), maxDate: "+1m +1w" } })

See the minDate and maxDate documentation for more info.

Upvotes: 1

Related Questions