How to disable days of the week and holidays with jQuery DatePicker

Question

with some help from here, I created a script to disable certain days of the week in the jQuery DatePicker. Now I want to add the option to disable also a specific time period (planned holidays). Eg. 12/08/2012 - 30/08/2012. Anyone who can help me to include this in below script?

I'm using jQuery version 1.7.2 and jQuery UI 1.8.18.

<script>

$(function() { 
$('input.datepicker').datepicker({

dateFormat: 'DD, d MM, yy',
minDate: "+1d",
changeMonth: false, 
changeYear: false,
showOn: 'both',
buttonImage: 'images/calendar.gif',
buttonImageOnly: true,
beforeShowDay: enableDAYS
},
$.datepicker.regional['nl']);
});

function enableDAYS(date) {
var day = date.getDay();
return [(day > 2 && day < 7), ''];
}

</script>

Answer 1

I have generated a jQuery date picker with following features.

• Displays the dates starting from two days onwards for three weeks
• Disables selection of weekends
• Disables the selection of defined public holidays
• Provides the holiday description in a tooltip

Find this plunker for more details.

// Contains Victorian public holidays which date selection needs to be restricted
var vicHolidays = [
  {
    date: '01/01/2015',
    desc: 'New Year Day'
  }, 
  {
    date: '26/01/2015',
    desc: 'Australia Day'
  },
  {
    date: '09/03/2015',
    desc: 'Labour Day'
  },
  {
    date: '03/04/2015',
    desc: 'Good Friday'
  },
  {
    date: '04/04/2015',
    desc: 'Saturday before Easter Sunday'
  },
  {
    date: '06/04/2015',
    desc: 'Easter Monday'
  },
  {
    date: '25/04/2015',
    desc: 'ANZAC Day'
  },
  {
    date: '08/06/2015',
    desc: 'Queens Birthday'
  },
  {
    date: '02/10/2015',
    desc: 'AFL Grand Final Holiday'
  },
  {
    date: '25/12/2015',
    desc: 'Christmas Day'
  },
  {
    date: '26/12/2015',
    desc: 'Boxing Day'
  },
  {
    date: '28/12/2015',
    desc: 'Boxing Day *Additional Day'
  }
  ];

$(function() {
  $("#datepicker").datepicker({
    firstDay: 1,    // First day of the week
    minDate: 2,     // Start of date selection
    maxDate: '10w',  // End of date selection

    /**
     * A function that takes a date as a parameter and must return an array with:
     * [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
     * 
     */
    beforeShowDay: function(date) {
                var result = [true, "", ""];
                result = $.datepicker.noWeekends(date);

                if (vicHolidays === null) {
                    result[1] = "";
                } else {
                  // Format the date in the format dd/mm/yy
                    var key = $.datepicker.formatDate("dd/mm/yy", date);

        // Go through the defined Victorian holidays
                  for (var i=0; i<vicHolidays.length; i++) {
          if (key == vicHolidays[i].date) {
                      result[0] = false;
                        result[1] = "dp-highlight-holiday";
                        result[2] = vicHolidays[i].desc;
          }                      
                  }
                }
                return result;
            }
  });
});

Answer 2

You can disable a specific date range using the following code You can specify the date range in the dateRange array, date format is yyyy/MM/dd So to disable dates from 12/08/2012 to 30/08/2012 you have to change the dateRange array like following

var dateRange = ["2012/08/12","2012/08/30"]; // yyyy/MM/dd    

Here is the code used in the fiddle

//  unavailable dates range
var dateRange = ["2012/05/20","2012/05/29"]; // yyyy/MM/dd


function unavailable(date) {
    var startDate = new Date(dateRange[0]);
    var endDate = new Date(dateRange[1]);
    var day = date.getDay();



    if(date > startDate && date < endDate )
        return [false, "disabled"];
    else if(day > 0 && day < 6)
        return [true, "enabled"];
    else 
        return [false, "disabled"];

}

$('input.datepicker').datepicker({ beforeShowDay: unavailable });

And here is a working fiddle.

Working Demo

Answer 3

I created a fiddle here for this solution.

It simulates a 'planned holiday' from '23/05/2012 to 24/05/2012'.

All I did was change your existing enableDAYS function to:

function enableDAYS(date) {
var startDate = new Date();
startDate.setFullYear(2012, 4, 22);
var endDate = new Date();
endDate.setFullYear(2012, 4, 24)
var day = date.getDay();
return [(day >= 1 && day < 6) && !(date >= startDate && date <= endDate), ''];
}​

You will obviously need to fetch the planned holidays from somewhere yourself and not 'hard code' the dates like I did. :) You could cater for public holidays in a similar fashion.