Метод setMaxDate

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

Метод используется в ситуациях, когда необходимо ограничить диапазон дат сверху:

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

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

Синтаксис

picker.setMaxDate(date);

Параметры

Параметр Тип Описание
date Date Максимально допустимая дата

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

Метод не возвращает значение.

Простейший пример

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

picker.setMaxDate(new Date(2025, 11, 31));

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

Как работает ограничение

После установки максимальной даты Pikaday выполняет несколько действий:

  1. Запоминает новое ограничение.
  2. Перерисовывает календарь.
  3. Блокирует все даты после указанной.
  4. Не позволяет выбрать недоступные дни.
  5. Корректирует навигацию между месяцами.

Например:

picker.setMaxDate(new Date(2025, 5, 15));

Если открыть июнь 2025 года, то после 15 числа все последующие дни окажутся неактивными.

Ограничение текущей датой

Одна из самых распространённых задач — запрет выбора будущих дат.

picker.setMaxDate(new Date());

Такой подход часто используется для:

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

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

Установка фиксированной даты

Максимальная дата может задаваться явно.

const maxDate = new Date(2030, 0, 1);

picker.setMaxDate(maxDate);

После этого даты позже 1 января 2030 года будут недоступны.

Использование переменной

Часто ограничение вычисляется заранее и сохраняется в переменную.

const lastAvailableDate = new Date(2026, 8, 30);

picker.setMaxDate(lastAvailableDate);

Подобный подход улучшает читаемость кода и упрощает поддержку приложения.

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

Метод можно вызывать многократно.

picker.setMaxDate(new Date(2025, 0, 1));

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

Второй вызов заменяет ранее установленное ограничение.

Ограничение на определённое количество дней вперёд

Иногда необходимо разрешить выбор даты только в пределах ближайшего периода.

Например, на 30 дней вперёд:

const maxDate = new Date();

maxDate.setDate(maxDate.getDate() + 30);

picker.setMaxDate(maxDate);

Теперь пользователь не сможет выбрать дату позднее чем через 30 дней от текущего момента.

Комбинация с setMinDate

Наиболее часто метод применяется совместно с setMinDate для формирования диапазона.

picker.setMinDate(new Date(2025, 0, 1));
picker.setMaxDate(new Date(2025, 11, 31));

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

Формирование диапазона относительно текущего дня

const minDate = new Date();

const maxDate = new Date();
maxDate.setDate(maxDate.getDate() + 14);

picker.setMinDate(minDate);
picker.setMaxDate(maxDate);

Такой сценарий используется в системах бронирования и записи на услуги.

Пользователь сможет выбрать дату только в течение ближайших двух недель.

Связанные календари

Распространённая задача — выбор периода «от» и «до».

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

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

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

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

startPicker.config.onSel ect = function() {
    const startDate = this.getDate();

    endPicker.setMinDate(startDate);
};

Изменение ограничения по событию

Максимальная дата может зависеть от действий пользователя.

document
    .getElementById('yearSelect')
    .addEventListener('change', function() {

        const year = Number(this.value);

        picker.setMaxDate(
            new Date(year, 11, 31)
        );
    });

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

Работа с серверными данными

Нередко максимальная дата приходит с сервера.

const responseDate = '2027-06-15';

picker.setMaxDate(
    new Date(responseDate)
);

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

Что происходит при выборе даты за пределами диапазона

Если дата позже установленного ограничения:

picker.setMaxDate(
    new Date(2025, 5, 1)
);

то:

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

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

Удаление ограничения

Для снятия максимальной даты используется значение null.

picker.setMaxDate(null);

После этого все будущие даты снова становятся доступными.

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

Например:

if (isAdmin) {
    picker.setMaxDate(null);
}
else {
    picker.setMaxDate(new Date());
}

Проверка текущей максимальной даты

Внутри экземпляра Pikaday установленное ограничение хранится в конфигурации.

console.log(
    picker._o.maxDate
);

Результатом будет объект Date либо null.

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

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

При использовании метода необходимо помнить, что месяцы в JavaScript нумеруются с нуля.

new Date(2025, 0, 1);

Это:

1 января 2025

А не февраль.

Распространённая ошибка:

picker.setMaxDate(
    new Date(2025, 12, 31)
);

Такое выражение фактически создаст дату января 2026 года.

Правильный вариант:

picker.setMaxDate(
    new Date(2025, 11, 31)
);

Практический пример: выбор даты рождения

const birthdayPicker = new Pikaday({
    field: document.getElementById('birthday')
});

birthdayPicker.setMaxDate(
    new Date()
);

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

Практический пример: система бронирования

const bookingPicker = new Pikaday({
    field: document.getElementById('booking')
});

const maxDate = new Date();

maxDate.setMonth(
    maxDate.getMonth() + 6
);

bookingPicker.setMaxDate(maxDate);

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

Практический пример: отчётный период

const reportPicker = new Pikaday({
    field: document.getElementById('reportDate')
});

reportPicker.setMinDate(
    new Date(2025, 0, 1)
);

reportPicker.setMaxDate(
    new Date(2025, 11, 31)
);

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

Типичные ошибки

Передача строки вместо объекта Date

Нежелательно полагаться на автоматическое преобразование:

picker.setMaxDate('2025-12-31');

Предпочтительно:

picker.setMaxDate(
    new Date('2025-12-31')
);

Перепутанный номер месяца

Ошибка:

new Date(2025, 12, 1);

Правильно:

new Date(2025, 11, 1);

Несогласованность с минимальной датой

Некорректная конфигурация:

picker.setMinDate(
    new Date(2025, 11, 31)
);

picker.setMaxDate(
    new Date(2025, 0, 1)
);

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

Забытое обновление ограничений

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

picker.setMaxDate(newMaxDate);

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

Взаимодействие с другими методами

Метод setMaxDate чаще всего применяется вместе со следующими методами:

Метод Назначение
setMinDate() установка минимальной даты
setDate() выбор даты программно
getDate() получение выбранной даты
gotoDate() переход к указанной дате
gotoToday() переход к текущему дню
draw() перерисовка календаря

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

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

Оглавление