Advanced Date Pick Restriction with the jQuery UI Datepicker

June 22, 2010 by Reboot · Leave a Comment 

You can implement the “beforeShowDay” method to restrict the days which can be selected from the datepicker.

As noted in the sourcecode:

beforeShowDay: null, // Function that takes a date and returns an array with
// [0] = true if selectable, false if not, [1] = custom CSS class name(s) or ”,
// [2] = cell title (optional), e.g. $.datepicker.noWeekends

An example (you can also run this code at jsfiddle):

[/sourcecode]
$(function(){
    $('#picker').datepicker({
        beforeShowDay: function(date) {
            var t = new Date();
            t = new Date(t.getFullYear(), t.getMonth(), t.getDate());

            var days = [];
            for (var i=0;i<7;i++) {
                t.setDate(t.getDate() + 1);
                days.push(t.getTime());
            }

            var day = date.getTime();
            return [$.inArray(day,days) > -1,''];
        },
        onSelect: function(dateText, inst) {
            $("#pickerresult").html($(this).datepicker( "getDate").toString());
        }
    });
});
[sourcecode]

About Reboot
Software Engineer - http://www.linkedin.com/in/orlissenberg

Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!