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?

Was it helpful?

Solution

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

OTHER TIPS

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

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, ''];
  }
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top