Установка максимальной даты

В библиотеке Pikaday ограничение выбора даты сверху реализуется через параметр maxDate. Он определяет предельную дату, которую пользователь может выбрать в календаре. Все даты, которые находятся после указанной границы, становятся недоступными для взаимодействия в интерфейсе календаря.

Базовое использование параметра maxDate

При инициализации календаря максимальная дата передаётся через объект конфигурации. Значение должно быть экземпляром Date, а не строкой или числом.

var picker = new Pikaday({
    field: document.getElementById('datepicker'),
    maxDate: new Date(2026, 11, 31)
});

В данном примере ограничение устанавливается на 31 декабря 2026 года. Важно учитывать, что месяцы в JavaScript начинаются с нуля, поэтому 11 соответствует декабрю.

Особенности работы с объектом Date

Pikaday не выполняет автоматический парсинг строк в даты в параметрах конфигурации. Это означает, что следующие варианты не являются корректными:

maxDate: '2026-12-31' // некорректно

Корректная форма всегда предполагает использование объекта:

maxDate: new Date(2026, 11, 31)

При необходимости преобразования строкового значения в дату следует явно использовать конструктор Date или сторонние инструменты форматирования до передачи значения в Pikaday.

Динамическое изменение максимальной даты

После инициализации календаря ограничение можно изменять программно. Для этого используется метод setMaxDate.

picker.setMaxDate(new Date(2027, 0, 15));

После вызова метода календарь автоматически пересчитывает доступные дни и обновляет интерфейс. Даты, выходящие за пределы нового диапазона, становятся недоступными для выбора.

Связь maxDate и текущего выбранного значения

Если пользователь уже выбрал дату, которая оказывается за пределами нового maxDate, Pikaday не всегда автоматически сбрасывает значение поля. Поэтому при динамическом изменении ограничения часто требуется дополнительная проверка текущего значения.

var selectedDate = picker.getDate();
var max = new Date(2026, 5, 30);

picker.setMaxDate(max);

if (selectedDate && selectedDate > max) {
    picker.setDate(null);
}

Такая логика предотвращает ситуации, когда в поле ввода остаётся недопустимое значение.

Совместное использование minDate и maxDate

Ограничение сверху часто применяется вместе с нижней границей minDate. Это позволяет задать допустимый диапазон выбора.

var picker = new Pikaday({
    field: document.getElementById('datepicker'),
    minDate: new Date(2026, 0, 1),
    maxDate: new Date(2026, 11, 31)
});

В результате календарь работает в рамках одного календарного года, полностью блокируя все даты вне диапазона.

Поведение интерфейса при выходе за пределы диапазона

При установке maxDate Pikaday изменяет визуальное состояние календаря:

  • дни после максимальной даты становятся неактивными;
  • навигация по месяцам ограничивается так, чтобы нельзя было перейти дальше допустимого диапазона;
  • текущий месяц может быть автоматически скорректирован, если он выходит за границы.

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

Использование текущей даты как ограничения

Частый сценарий — запрет выбора будущих дат. Для этого в качестве maxDate используется текущий день.

var today = new Date();

var picker = new Pikaday({
    field: document.getElementById('datepicker'),
    maxDate: today
});

При этом важно учитывать, что объект Date содержит и время. Pikaday ориентируется на дату без учёта времени, но при сравнении значений в пользовательской логике это может иметь значение.

Нормализация времени при установке ограничения

Для корректного поведения часто применяется нормализация даты до полуночи:

function normalizeDate(d) {
    return new Date(d.getFullYear(), d.getMonth(), d.getDate());
}

var max = normalizeDate(new Date());

Такое приведение позволяет избежать ситуаций, когда сравнение дат с временной составляющей приводит к неожиданным результатам в пользовательской логике.

Обновление maxDate на основе пользовательского ввода

В динамических интерфейсах ограничение может зависеть от других полей формы. Например, выбор минимальной даты в одном календаре влияет на максимальную в другом.

var startPicker = new Pikaday({
    field: document.getElementById('start'),
    onSelect: function() {
        var startDate = this.getDate();
        endPicker.setMinDate(startDate);
    }
});

var endPicker = new Pikaday({
    field: document.getElementById('end')
});

В этом случае maxDate может вычисляться дополнительно, например, на основе бизнес-логики:

endPicker.setMaxDate(new Date(2026, 11, 31));

Ограничение диапазона по относительным правилам

Иногда максимальная дата рассчитывается относительно текущей:

var today = new Date();
var nextYearLimit = new Date(today.getFullYear() + 1, today.getMonth(), today.getDate());

var picker = new Pikaday({
    field: document.getElementById('datepicker'),
    maxDate: nextYearLimit
});

Такой подход используется в системах бронирования и планирования, где требуется ограничение «на год вперёд».

Влияние формата локали на отображение ограничений

Хотя maxDate влияет на логику выбора, отображение даты зависит от настроек форматирования Pikaday. При этом сама граница не изменяется в зависимости от локали, но восприятие пользователем может отличаться из-за формата отображения.

Ошибки при работе с maxDate

Типичные проблемы возникают при неправильной передаче значения:

  1. Передача строки вместо Date
  2. Использование некорректного порядка месяцев
  3. Несоответствие временных зон при сравнении дат
  4. Попытка установить maxDate раньше уже выбранной даты без очистки значения

Корректная работа всегда требует явного контроля типов и последовательности обновлений.

Сброс ограничения maxDate

Для снятия ограничения используется установка null:

picker.setMaxDate(null);

После этого календарь перестаёт блокировать верхнюю границу, и пользователь получает доступ ко всем будущим датам.

Комбинированные сценарии управления датами

В сложных интерфейсах maxDate часто управляется вместе с другими параметрами Pikaday:

  • setMinDate
  • setDate
  • gotoDate

Пример синхронизации состояния:

picker.setMinDate(new Date(2026, 0, 1));
picker.setMaxDate(new Date(2026, 11, 31));
picker.gotoDate(new Date(2026, 5, 1));

Такое управление позволяет полностью контролировать отображаемый диапазон и текущую позицию календаря.

Поведение при пересечении диапазонов

Если одновременно заданы minDate и maxDate, которые пересекаются некорректно (например, minDate больше maxDate), Pikaday может вести себя непредсказуемо: календарь становится пустым или блокирует все даты. Поэтому логика установки ограничений всегда должна гарантировать корректный диапазон:

if (minDate <= maxDate) {
    picker.setMinDate(minDate);
    picker.setMaxDate(maxDate);
}
Оглавление