Параметр minDate и maxDate

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

Назначение minDate

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

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

Базовое поведение:

new Pikaday({
    field: document.getElementById('datepicker'),
    minDate: new Date(2025, 0, 1)
});

В данном примере пользователь не сможет выбрать дату раньше 1 января 2025 года. Все предыдущие дни будут визуально заблокированы.

Особенности работы minDate

При установке minDate происходит несколько внутренних ограничений:

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

Поведение при некорректном текущем значении:

const picker = new Pikaday({
    field: document.getElementById('datepicker'),
    minDate: new Date(2025, 5, 10)
});

picker.setDate(new Date(2025, 0, 1)); // будет сброшено

Назначение maxDate

Параметр maxDate задаёт верхнюю границу выбора даты. Все значения, превышающие указанную дату, становятся недоступными для выбора.

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

Пример использования:

new Pikaday({
    field: document.getElementById('datepicker'),
    maxDate: new Date(2025, 11, 31)
});

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

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

Наиболее распространённый сценарий — ограничение диапазона сразу с двух сторон. Это формирует фиксированное окно допустимых значений.

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

В результате пользователь получает календарь, в котором доступны только даты 2025 года.

Логика при пересечении границ

При некорректной конфигурации, когда minDate превышает maxDate, поведение становится неопределённым с точки зрения пользовательского опыта. Внутренние проверки библиотеки не гарантируют автоматическую нормализацию диапазона.

Пример проблемной конфигурации:

new Pikaday({
    minDate: new Date(2025, 11, 31),
    maxDate: new Date(2025, 0, 1)
});

Такой диапазон фактически делает невозможным выбор любой даты.

Влияние на навигацию календаря

minDate и maxDate влияют не только на выбор, но и на навигацию:

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

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

Динамическое изменение minDate и maxDate

Ограничения могут изменяться после инициализации компонента. Это позволяет адаптировать календарь под пользовательский ввод или внешние условия.

const picker = new Pikaday({
    field: document.getElementById('datepicker')
});

picker.setMinDate(new Date(2025, 3, 1));
picker.setMaxDate(new Date(2025, 9, 30));

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

Взаимодействие с setDate

При установке даты через setDate происходит проверка на соответствие диапазону:

  • если дата находится внутри диапазона — она устанавливается;
  • если ниже minDate или выше maxDate — значение игнорируется или сбрасывается.

Пример:

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

picker.setDate(new Date(2024, 5, 1)); // не будет принято

Форматы и типы значений

minDate и maxDate принимают значения типа Date. Передача строк или числовых timestamp без преобразования может привести к некорректной работе или необходимости дополнительной обработки.

Корректный подход:

new Date('2025-01-01')

Нежелательный вариант:

minDate: '2025-01-01'

Ограничение диапазона и локальная логика приложения

Использование границ календаря часто связано с бизнес-логикой:

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

Пример вычисления динамического maxDate:

const today = new Date();
const pastYear = new Date(today.getFullYear() - 1, today.getMonth(), today.getDate());

new Pikaday({
    field: document.getElementById('datepicker'),
    minDate: pastYear,
    maxDate: today
});

Поведение при отключённых границах

Если minDate и maxDate не заданы, календарь работает без ограничений. В этом режиме доступны все даты, включая далёкое прошлое и будущее, что может быть нежелательно в прикладных интерфейсах, где требуется контроль вводимых данных.

Визуальное представление ограничений

Ограниченные даты в календаре отображаются как неактивные элементы интерфейса. Они:

  • не реагируют на клики;
  • не получают фокус;
  • визуально отличаются стилем (обычно приглушённый цвет);
  • не участвуют в навигации выбора.

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

Оглавление