Thursday 17 November 2016

Enable only holidays and weekends in JQuery Datepicker

We can use JQuery datepicker's beforeshowday() to enable only weekends and off days (i.e. specific festival days).

As per JQuery UI's documentation beforeShowDay() takes date as parameter and must return an array


[0]: true/false indicating whether or not this date is selectable

[1]: a CSS class name to add to the date's cell or "" for the default presentation

[2]: an optional popup tooltip for this date

The function is called for each day in the datepicker before it is displayed.

So here's the example where I've written a code to disable all the weekdays excluding specific days such as festivals and weekends.

$(document).ready(function(){
 $("#datepicker").datepicker({
   changeMonth: true,
        changeYear: true,
   beforeShowDay:function(dt){
     var enableDay = ["15-8-2016","5-9-2016","11-10-2016","31-10-2016","10-11-2016", "26-12-2016"];       
        var dmy = dt.getDate() + "-" + (dt.getMonth() + 1) + "-" + dt.getFullYear();
     if ($.inArray(dmy, enableDay) > -1){
      return [true, ""];
     }else{
      return [dt.getDay() == 0 || dt.getDay() == 6];
     }           
    }
  });
});

Demo


Hope it'll help :)

You can find more about disabling dates in JQuery here: How to Disable Dates in Jquery DatePicker – A Short Guide

No comments:

Post a Comment