jQuery datepicker exclude date

on with Leave a reply

I would like to share, exclude dates from jquery datepicker. Here I have explained exclude recurrent date, period, recurrent period from jquery ui calendar. I have previously posted two other posts related to the excluding dates from datepicker those are jQuery datepicker exclude single date and Exclude recurrent day in jQuery datepicker. So here we are going to see the serious of previous post.

jQuery datepicker exclude recurrent date.

We are going to see how to exclude recurrent date from jquery ui datepicker. below example code shows, how to exclude every month 28 date from calender.

var excludedays = { "recurrent_date": [28]};

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

function recurrent_date(date){
   return ($.inArray(date.getDate(),excludedays.recurrent_date) > -1);
}

jQuery datepicker exclude period.

Here i have explained how to exclude specific period of time from jquery ui calendar. below example excludes specified from date to specified to date. So it disable the given period of date from datepicker.

var excludedays = { "period": [{ "from": "2/21/2012", "to": "2/22/2012" }]};

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

function period(date){
   var i, num, period, start, startArray, end, endArray;
   num = excludedays.period.length;
   for(i=0;i<num;i++){
       period = excludedays.period[i];
       startArray = period.from.split('/');
       start = new Date(startArray[2], (startArray[0] - 1), startArray[1]);
       endArray = period.to.split('/');
       end = new Date(endArray[2], (endArray[0] - 1), endArray[1]);        
       if(date>=start && date<=end){
           return true;
       }
   }
   return false;
}

jQuery datepicker exclude recurrent period.

In some case, We need to do some custom work on this calendar. So we are going to do one simple function to exclude the recurrent period of dates in jQuery datepicker. Using this function recurrent period of dates will be disabled from calender, Those recurrent period of dates will not available to user.

var excludedays = { "recurrent_period": [{ "from": "2/28/2012", "to": "2/29/2012","period": "monthly" },{ "from": "2/7/2012", "to": "2/9/2012","period": "yearly" }
 ]};
$('#caleder').datepicker({
 beforeShowDay: function(date){
 if(recurrent_period(date)){
 return [false];
 }
 return [true];
 }
 });
function recurrent_period(date){
 var i, num, period, recurrence, startArray, endArray, startDay, endDay, start, end;
 num = excludedays.recurrent_period.length;
 for(i=0;i= startDay && date.getDate() =start && date<=end){
 return true;
 }
 }
 }
 return false;
 }

Hope it helps.

Posted in jQuery and tagged , , by .

About Gowri

I am professional web developer with 4+ years experience. PHP, jQuery, WordPress, Magento and Symfony2 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.

Leave a Reply

Your email address will not be published. Required fields are marked *