How to limit days available in jquery ui date-picker

Question

I need to limit the jquery ui date picker to only have future Tuesdays and Thursdays as selectable days. How can I accomplish this?

Answer 1

Provide an onSelect handler to the datepicker and have your handler validate that the dates fit your defined criteria. I'm not sure where the onSelect fires so you may have "undo" the selection if you can't stop the event and alert the user.

One way of doing this would be to develop a custom date validator class that takes parameters and then call that date validator from the onSelect function. The onSelect function could take care of interacting with the datepicker itself to keep the design clean.

From http://docs.jquery.com/UI/Datepicker/datepicker#options

$("div.selector").datepicker({ 
  onSelect: function(dateText) { 
    alert(dateText);
  } 
})

To change the display and selectability of a particular date or set of days use a beforeShowDay handler and have it change the selectability and CSS for the date in question.

$(".selector").datepicker({ beforeShowDay: nationalDays})   

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, ''];
}