В jquery ui Date-Picker, как разрешить выбор определенных дней недели и отключить другие будни

Question

Мне нужно ограничить средство выбора даты jquery ui, чтобы только будущие вторники и четверги были выбираемыми днями.

Как мне это сделать?

Answer 1

Это все в документации. Функция beforeShowDay будет делать то, что вы хотите.

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

У меня были разные дни, но я до того, как beforeShowDay вызвал мою функцию 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, ''];
  }
}

Answer 2

Предоставьте обработчик onSelect для средства выбора даты, и ваш обработчик подтвердит, что даты соответствуют вашим заданным критериям. Я не уверен, где срабатывает onSelect, поэтому вы можете отменить выбор, если не можете остановить событие и предупредить пользователя.

Один из способов сделать это - разработать собственный класс валидатора даты, который принимает параметры, а затем вызвать этот валидатор даты из функции onSelect. Функция onSelect может позаботиться о взаимодействии с самим средством выбора даты, чтобы сохранить дизайн в чистоте.

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

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

Чтобы изменить отображение и возможность выбора конкретной даты или набора дней, используйте обработчик beforeShowDay, чтобы он изменил возможность выбора и CSS для рассматриваемой даты.

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