CODEWITHSUNDEEP
javascriptjqueryjquery-uidatepickerjquery-ui-datepicker
Jason Christa
Jason Christa

Reputation: 12498

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?

Upvotes: 4

Views: 8933

Answers (2)

Richard Torcato
Richard Torcato

Reputation: 2762

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

Upvotes: 3

tvanfosson
tvanfosson

Reputation: 532465

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

Upvotes: 2

Related Questions