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

Ответ 1

Событие Datepicker beforeShowDay() предназначено именно для этой цели. Здесь пример, когда набор допустимых дат относительно мал для целей иллюстрации. В зависимости от того, сколько дат у вас есть и как они выбраны, вы могли бы написать метод, который программно выбирал даты (например, игнорируя выходные, 1 и 15 числа каждого месяца и т.д.). Или вы можете комбинировать оба метода, например удалить выходные дни и фиксированный список праздников.

$(function() {
    // this could be a static hash, generated by the server, or loaded via ajax
    // if via ajax, make sure to put the remaining code in a callback instead.
    var dates_allowed = {
          '2009-12-01': 1,
          '2009-12-25': 1,
          '2010-09-28': 1,
          '2011-10-13': 1
    };

    $('#datepicker').datepicker({
        // these aren't necessary, but if you happen to know them, why not
        minDate: new Date(2009, 12-1, 1),
        maxDate: new Date(2010, 9-1, 28),

        // called for every date before it is displayed
        beforeShowDay: function(date) {

            // prepend values lower than 10 with 0
            function addZero(no) {
                if (no < 10){
                  return "0" + no;
                }  else {
                  return no; 
                }
            }

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

            if (dates_allowed[date_str]) {
                return [true, 'good_date', 'This date is selectable'];
            } else {
                return [false, 'bad_date', 'This date is NOT selectable'];
            }
        }
    });
});

Возвращаемые значения

[0]: boolean selectable or not,
[1]: CSS class names to apply if any (make sure to return '' if none),
[2]: Tooltip text (optional)

Обратите внимание, что переменная date, указанная в обратном вызове, представляет собой экземпляр объекта Date, представляющего данный день, а не текстовую версию этой даты в указанном формате. Например, вы можете сгенерировать список допустимых дат в одном формате, указав даты в datepicker в другом формате (например, чтобы вам не пришлось преобразовывать даты из БД при создании страницы).

См. также Можно ли настроить jQuery UI Datepicker для отключения субботы и воскресенья (и праздников)?

Ответ 2

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

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

Конечно, вы могли бы выполнить запрос 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}}

Ответ 3

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

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

Ответ 4

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

Ответ 5

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

Ответ 6

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

Ответ 7

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

Более подробную информацию о датах отключения можно найти здесь.