Disable specific dates in jquery

Question

I am using the jquery date picker found here: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerStartEnd.html that allows the user to pick a start and end date.

However I want to be able to disable specific dates.

I tried to implement the code found here: stackoverflow.com/questions/501943/can-the-jquery-ui-datepicker-be-made-to-disable-saturdays-and-sundays-and-holida that discusses disabling national holidays.

Here is my complete code:

$(function()
{


 $('.date-pick').datePicker({ beforeShowDay: nationalDays})
// $(".selector").datepicker({ beforeShowDay: nationalDays})   

 var natDays = [
   [1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'],
   [4, 27, 'za'], [5, 25, 'ar'], [6, 6, 'se'],
   [7, 4, 'us'], [8, 17, 'id'], [9, 7, 'br'],
   [10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke']
 ];

 function nationalDays(date) {
  for (i = 0; i < natDays.length; i++) {
    if (date.getMonth() == natDays[i][0] - 1
     && date.getDate() == natDays[i][1]) {
   return [false, natDays[i][2] + '_day'];
    }
  }
   return [true, ''];
 }

 $('#start-date').bind(
  'dpClosed',
  function(e, selectedDates)
  {
   var d = selectedDates[0];
   if (d) {
    d = new Date(d);
    $('#end-date').dpSetStartDate(d.addDays(1).asString());
   }
  }
 );
 $('#end-date').bind(
  'dpClosed',
  function(e, selectedDates)
  {
   var d = selectedDates[0];
   if (d) {
    d = new Date(d);
    $('#start-date').dpSetEndDate(d.addDays(-1).asString());
   }
  }
 );

});

But this does not seem to work.

I would really appreciate any assistance with solving this!

Answer 1

The Simple Calendar Widget has that sort of capability built-in. Could you switch?

Answer 2

You seem to be confused between two different date pickers. The link you show referring to "beforeShowDay" is documentation for the jQuery UI datepicker widget. But it appears you are using my date picker widget.

With my widget you need to use a renderCallback to allow you to disable certain dates. These two examples show how:

http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerCustomCellRender.html (a popup calendar with weekends disabled)

http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/renderCalendarBankHolidays.html (another example showing renderCalendar with a renderCallback which shows UK bank holidays - datePicker uses renderCalendar behind the scenes so you can pass the renderCallback in in the same manner.