jQuery UI presents highly configurable jQuery ui datepicker.This date picker is very easy to configure and use. There is many demo and documentation available in jQuery ui datepicker demo page.

In some case, We need to do some custom work on this calender. So we are going to do one simple function to exclude the single date in jQuery date picker. Using this function one single date will be diabled from caleder, That date will not available to user.

We are going to use beforeShowDay option, to do this work.

beforeShowDay: The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name(s) or ” for the default presentation, and [2] an optional popup tooltip for this date. It is called for each day in the datepicker before it is displayed.

Lets configure the date picker,

Lets, consider we have the excluded date data as in JSON format as in below.

Sample Code for exclude single date from datepicker

var excludedays = { "single": [ "2/4/2012", "3/2/2012" ]};

$('#caleder').datepicker({
beforeShowDay: function(date){
if(single(date)){
return [false];
}
return [true];
}
});

function single(date){
var USdate = (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear();
return ($.inArray(USdate,excludedays.single) > -1);
}

Demo