jQuery datepicker exclude single date

on

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

Posted in jQuery and tagged , , by .

About Gowri

I am professional web developer with 8+ years experience. PHP, jQuery, WordPress, Angular and Ionic are my key skills in web development. I am working with strong enthusiastic team with spirit. We provide all web related solution like HTML/CSS development, Web graphic design and Logo.

3 thoughts on “jQuery datepicker exclude single date

  1. Pingback: Exclude recurrent day in jQuery datepicker - Code CocktailCode Cocktail

  2. Pingback: jQuery datepicker exclude date - Code Cocktail

Comments are closed.