In jquery ui date-picker, how to enable the selection of specific weekdays and disable other weekdays

Question

I need to limit the jquery ui data collector to only future Tuesdays and Thursdays as selectable days.

How can i do this?

Answer 1

Provide the onSelect handler for the datepicker and check the handler so that the dates meet your specific criteria. I am not sure where onSelect is triggered, so you can “cancel” the selection if you cannot stop the event and alert the user.

One way to do this would be to create a personalized date validator class that takes parameters and then calls that date validator from the onSelect function. The onSelect function can take care of interacting with the dumper itself to maintain a clean design.

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

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

To change the display and select a specific date or many days, use the beforeShowDay handler and change its selection and CSS for the specified date.

 $(".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, '']; } 

Answer 2

All this is in the documentation. The beforeShowDay function 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 function limitdays

 function limitDays(date){ var day = date.getDay(); // Only make Mon, Tues, and Thurs selectable if(day == 1 || day == 2 || day == 4){ return [true, '']; }else{ return [false, '']; } }