The JQuery Calendar picker is a very handy element that is used in many places on the web. The default functionality is great, but what if you need a custom date range, or to black out specific dates? The picker has an event handler called “beforeShowDay” that will let you hook into and modify what dates are available to pick from the element.
For example, to allow users to sign up for campus visits on Tuesday and Thursday, I needed to “black out” the rest of the days from the ui. I also needed to black out a couple of days that will be unavailable due to special events. I can write a function to specify these days, then call the function on the “beforeShowDay” event handler.
[code]
var unavailableDates = [“19-5-2016”, “16-6-2016”];
function unavailable(date) {
dmy = date.getDate() + “-” + (date.getMonth()+1) + “-” +date.getFullYear();
if ($.inArray(dmy, unavailableDates) < 0) {
return [true,””,””];
} else {
return [false,””,”This day is unavailable.”];
}
var day = date.getDay();
return [(day == 2 || day==4)];
}
$( “#mydatefield” ).datepicker({
minDate: ‘+7d’, changeMonth: true, changeYear: true, yearRange:”c-80:c”, beforeShowDay: unavailable});
[/code]