In Jquery Ui Date-picker How To Allow Selection Of Specific Weekdays And Disable The Other Weekdays

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

Solution 1:

It's all in the documentation. The function beforeShowDay will do what you want.

http://api.jqueryui.com/datepicker/#option-beforeShowDay

My use was different days but I ended up with beforeShowDay calling my limitdays function

functionlimitDays(date){

var day = date.getDay();

  // Only make Mon, Tues, and Thurs selectableif(day == 1 || day == 2 || day == 4){
    return [true, ''];
  }else{
    return [false, ''];
  }
}

Solution 2:

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

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