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

Параметр minDate как базовый механизм ограничения выбора

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

Опция minDate принимает объект типа Date. Это ключевой момент: библиотека не выполняет автоматическое преобразование строк в даты без явной обработки, поэтому передача корректного экземпляра Date определяет корректность всей логики ограничения.

const picker = new Pikaday({
    field: document.getElementById('date'),
    minDate: new Date(2024, 0, 1)
});

В данном примере минимальная дата установлена на 1 января 2024 года. Все даты до неё будут недоступны для выбора.

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

При передаче значения в minDate используется нативный JavaScript Date, где месяцы индексируются с нуля. Это означает, что январь соответствует 0, февраль — 1 и так далее.

minDate: new Date(2025, 11, 25) // 25 декабря 2025

Ошибки в индексации месяцев являются одной из наиболее частых причин некорректного поведения ограничения диапазона.

Важно учитывать, что Date создаётся в локальном часовом поясе среды выполнения. Это может влиять на поведение при пересечении границ суток, особенно в системах с обработкой UTC-времени.

Ограничение прошлых дат

Типовой сценарий использования minDate — запрет выбора дат в прошлом. В этом случае минимальная дата устанавливается динамически на текущий день.

const today = new Date();

const picker = new Pikaday({
    field: document.getElementById('date'),
    minDate: today
});

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

Если требуется исключить текущий день и разрешить выбор только начиная со следующего, используется смещение:

const today = new Date();
const tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 1);

const picker = new Pikaday({
    field: document.getElementById('date'),
    minDate: tomorrow
});

Связь minDate и setMinDate

В дополнение к конфигурационному параметру существует метод setMinDate, позволяющий изменять ограничение после создания экземпляра календаря.

picker.setMinDate(new Date(2026, 0, 1));

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

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

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

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

const startPicker = new Pikaday({
    field: document.getElementById('start')
});

const endPicker = new Pikaday({
    field: document.getElementById('end'),
    minDate: new Date()
});

startPicker.on('select', function() {
    const selectedStart = startPicker.getDate();
    endPicker.setMinDate(selectedStart);
});

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

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

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

picker.setMinDate(new Date(2026, 5, 10));

Если в поле ранее была установлена дата 1 июня 2026 года, она будет автоматически очищена, так как выходит за допустимый диапазон.

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

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

const picker = new Pikaday({
    field: document.getElementById('date'),
    minDate: new Date(2026, 0, 10),
    defaultDate: new Date(2026, 0, 1),
    setDefaultDate: true
});

В этом случае начальная дата не попадает в допустимый диапазон и не устанавливается.

Использование строк и парсинг дат

Хотя minDate ожидает объект Date, в некоторых архитектурах дата приходит в виде строки. В таких случаях требуется явное преобразование.

const minDateFromApi = new Date('2026-01-15');

const picker = new Pikaday({
    field: document.getElementById('date'),
    minDate: minDateFromApi
});

Надёжность этого подхода зависит от формата строки. Формат ISO-8601 является наиболее стабильным для парсинга в JavaScript.

Ограничение диапазона в рамках календарных месяцев

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

minDate: new Date(2026, 3, 20)

В апреле 2026 года даты с 1 по 19 число будут недоступны, а март может быть полностью скрыт при навигации.

Комбинирование minDate и пользовательских правил

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

const picker = new Pikaday({
    field: document.getElementById('date'),
    minDate: new Date(2026, 0, 1),
    disableDayFn: function(date) {
        return date.getDay() === 0; // блокировка воскресений
    }
});

Таким образом формируется комбинированное правило: все даты до 1 января 2026 недоступны, а также исключаются воскресенья внутри допустимого диапазона.

Особенности повторной инициализации и обновления ограничений

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

В SPA-архитектурах это особенно критично, так как компоненты могут размонтироваться и создаваться заново при навигации.

Сценарии с временными зонами и смещениями суток

При работе с серверными данными, особенно в UTC, может возникать смещение даты на один день при отображении в локальной зоне. Это напрямую влияет на minDate.

const utcDate = new Date(Date.UTC(2026, 0, 1));

const picker = new Pikaday({
    field: document.getElementById('date'),
    minDate: utcDate
});

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

Использование minDate в связке с валидацией формы

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

function validate(date) {
    const min = new Date(2026, 0, 1);
    return date >= min;
}

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

Поведение при установке null или отсутствии значения

Если minDate не задан, календарь допускает выбор любых дат без нижнего ограничения. Установка значения в null или undefined эквивалентна отсутствию ограничения.

const picker = new Pikaday({
    field: document.getElementById('date'),
    minDate: null
});

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

Оглавление