CODEWITHSUNDEEP
jqueryhtml
Abhijeet
Abhijeet

Reputation: 13856

Restrict selection of few dates in jQuery DatePicker

Following code is intended to restrict selection of today's date in datepicker.

    jQuery(function () {

        var dateModifier = {
            beforeShowDay: function (dd) {
                var today = new Date();
                if (dd.getDate() === today.getDate()) {
                    return false;
                }
                else {
                    return true;
                }
            }
        };

        jQuery("#txt1").datepicker(dateModifier);

    });

For this purpose I have explicity passed dateModifier object, containing beforeShowDay event. I read on jQuery doc that this event is fired for all the dates shown in calender. When we return false, dd date would be disabled.

However this code disables all the dates. What am I missing.

HTML:

<input id="txt1" type="text" name="name" value=" " />

Upvotes: 0

Views: 119

Answers (1)

Clyde Lobo
Clyde Lobo

Reputation: 9174

var disabledDays = ["9-21-2010", "9-24-2010", "9-27-2010", "9-28-2010", "9-3-2010", "9-17-2010", "9-2-2010", "9-3-2010", "9-4-2010", "9-5-2010"];
function disableAllTheseDays(date) {
    var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
    for (i = 0; i < disabledDays.length; i++) {
        if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) {
            return [false];
        }
    }
    return [true];
}

var dateModifier = {
        beforeShowDay: disableAllTheseDays
    };

    jQuery("#txt1").datepicker(dateModifier);

Check here for some more

Upvotes: 3

Related Questions