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]