Datepicker для веб-страницы, которая может позволить только определенным датам быть нажатыми

Вы можете начать с использования jquery ui datepicker. Загрузите последнюю версию пакета разработки и работайте с ui.datepicker.js. См. _GenerateHTML. Найдите переменную, которую нельзя выбрать. Если ваш серверный код может сгенерировать какой-то скрипт - он может заполнить некоторые новые настройки, вы можете расширить выбор даты, чтобы принять. Затем добавьте проверку к тому списку действительных дат в этой строке, где установлено значение «Невозможно выбрать». Обратите внимание, что, похоже, средство выбора даты позволяет вводить даты с клавиатуры за пределами допустимого диапазона.

Если вы уже используете jquery ui, я бы, вероятно, просто переопределил прототип _generateHTML после того, как вы загрузили сценарий jquery UI.

Возможно, вы могли бы расширить DatePicker, чтобы разрешить отключенные / разрешенные даты ... Я считаю, что вы могли бы удалить обработчик кликов для отключенных дат, сделав их неактивными. Затем просто настройте CSS для отключенных дат, и они могут быть "серыми".

Я сделал такое приложение (веб-выбор даты с различными запрещенными датами), используя YUI Calendar и кучу настраиваемого кода. При этом я сделал это до того, как открыл для себя чудесные радости jQuery (и «Боже, это не вполовину так хорошо, как jQuery, но, по крайней мере, он использует методы jQuery» пользовательского интерфейса jQuery). Если бы я сделал это снова, я бы определенно использовал jQuery UI (несмотря на его многочисленные недостатки) в качестве основы; смешивать библиотеки сложнее, чем иметь дело с незрелостью пользовательского интерфейса jQuery.

Попробуйте dijit.Calendar Существует свойство isDisabledDate, которое вы можете установить в разметке или в JavaScript для функции. См. Второй пример. Метод отключения дат вызывается для каждого дня по мере его отображения. Функция может делать что-то вроде определения того, соблюдается ли шаблон (это выходные?), Или сравнивать его с некоторой статической таблицей (массивом), которую вы предоставляете с сервера, например, в дни занятости или праздники. Метод getClassForDate можно переопределить, чтобы вернуть класс CSS.

Разрабатывая ответ Роба Ван Дама, вот пример кода (с использованием набора данных jQuery UI) для получения включенных дат с помощью AJAX. Я использую AJAX для запроса PHP-страницы, которая возвращает включенную дату из базы данных (потому что я хочу показывать только даты, где у меня есть фактические данные).

Идея заключается в том, чтобы делать AJAX-запрос каждый раз, когда пользователь меняет месяц, а затем хранить включенные даты для этого месяца в глобальном массиве (allowedDates), который позже будет использоваться доShowDay.

Конечно, можно было бы выполнять AJAX-запрос в beforeShowDay, но это было бы довольно неэффективно из-за большого количества AJAX-запросов (более 30 за каждый месяц).

var allowedDates = new Object();

function queryAllowedDates (year, month, id) {
  $.ajax({
    type: 'GET',
    url: 'calendar_days.php',
    dataType: 'json',
    success: function(response) { 
      allowedDates[id] = response.allowedDates;
    },
    data: {year:year,month:month},
    async: false
  });
}

$("#datepicker1").datepicker({
  dateFormat: 'dd.mm.yy', 
  changeMonth: true, 
  changeYear: true ,
  beforeShow: function (input) {
    var currentDate = $(input).datepicker('getDate');
    var id = $(input).attr('id');
    queryAllowedDates(currentDate.getFullYear(), currentDate.getMonth()+1,id);
  },
  onChangeMonthYear: function (year, month, inst) {
    queryAllowedDates(year, month, inst.input.attr('id'));
  },
  beforeShowDay: function (day) {
    var id = $(this).attr('id');

    var date_str = [
      day.getFullYear(),
      day.getMonth() + 1,
      day.getDate()
    ].join('-');

    if (allowedDates[id] != undefined && allowedDates[id][date_str]) {
      return [true, 'good_date', 'This date is selectable'];
    } else {
      return [false, 'bad_date', 'This date is NOT selectable'];
    } 
  }
});

В этом примере PHP-страница возвращает JSON-массив, содержащий что-то вроде :

{"allowedDates":{"2008-12-04":1,"2008-12-11":1}}

Я использую Класснейший Яваскриптовый Календарь в течение многих лет, и он имеет возможность отключать некоторые дни календаря. Просто посмотрите на него, я использую его во всех типах ASP.NET проектов.

Больше информации о отключении дат можно найти здесь.