Параметр maxDate в Flatpickr определяет верхнюю границу
диапазона допустимых значений календаря. Любая дата, превышающая
заданный предел, становится недоступной для выбора в UI и игнорируется
при ручном вводе (в зависимости от настроек валидации). Этот механизм
используется для ограничения дат в формах бронирования, регистрации,
отчётах и любых сценариях, где будущее значение выходит за рамки
допустимого диапазона.
Flatpickr поддерживает несколько форматов задания максимальной даты:
строковые выражения, объекты Date и динамические вычисления
через функции. Каждый из вариантов имеет свои особенности поведения и
область применения.
Наиболее распространённый способ — передача строки в формате, поддерживаемом Flatpickr. Библиотека использует внутренний парсер дат и позволяет задавать значения в различных форматах.
flatpickr("#dateInput", {
maxDate: "2026-12-31"
});В этом случае календарь ограничивается 31 декабря 2026 года включительно. Все даты после этого значения становятся недоступными для выбора.
Строковый формат удобен тем, что не требует создания объекта
Date и легко читается при конфигурации. Однако важно
учитывать, что интерпретация строки зависит от настроек локали и формата
даты, заданного в экземпляре Flatpickr.
Более строгий и предсказуемый способ — передача объекта
Date. Такой подход исключает неоднозначность парсинга и
рекомендуется в случаях, когда дата вычисляется программно.
flatpickr("#dateInput", {
maxDate: new Date(2026, 11, 31)
});Следует учитывать, что месяцы в JavaScript нумеруются с нуля, поэтому
11 соответствует декабрю.
Использование Date-объекта особенно полезно при работе с
динамическими значениями, полученными из API или вычисляемыми на основе
текущего времени:
const limit = new Date();
limit.setDate(limit.getDate() + 7);
flatpickr("#dateInput", {
maxDate: limit
});В этом примере календарь ограничен датами не далее чем на 7 дней от текущего момента.
Flatpickr поддерживает текстовые выражения, позволяющие задавать дату относительно текущего момента. Это удобно для временных ограничений без необходимости ручных вычислений.
flatpickr("#dateInput", {
maxDate: "today"
});В этом случае выбор ограничивается текущей датой. Всё, что находится в будущем, становится недоступным.
Также возможны выражения с относительными смещениями:
flatpickr("#dateInput", {
maxDate: "7 days"
});Здесь диапазон ограничивается семью днями вперёд от текущей даты.
Подобные выражения повышают гибкость конфигурации и уменьшают необходимость в ручной логике расчётов дат.
Flatpickr позволяет изменять ограничения уже после инициализации
календаря. Для этого используется метод set.
const fp = flatpickr("#dateInput", {
maxDate: "2026-12-31"
});
fp.set("maxDate", "2026-11-30");Изменение вступает в силу мгновенно, и интерфейс календаря пересчитывает доступные значения без необходимости пересоздания экземпляра.
Этот подход применяется в ситуациях, когда ограничения зависят от пользовательского выбора или данных с сервера.
Параметр maxDate часто используется совместно с
minDate для формирования диапазона допустимых значений.
flatpickr("#dateInput", {
minDate: "today",
maxDate: "2026-12-31"
});В таком случае пользователь может выбрать только даты между текущим днём и заданной верхней границей.
Если значения пересекаются некорректно (например,
minDate позже maxDate), календарь может вести
себя непредсказуемо или полностью блокировать выбор дат. Поэтому важно
поддерживать логическую согласованность диапазона.
Flatpickr не только ограничивает интерфейс календаря, но и может
контролировать ввод текста в поле. Если пользователь вводит дату,
выходящую за пределы maxDate, она может быть автоматически
очищена или скорректирована в зависимости от параметров
allowInput и enable.
flatpickr("#dateInput", {
maxDate: "2026-12-31",
allowInput: true
});В этом режиме пользователь может ввести дату вручную, но при потере фокуса поле будет проверено на соответствие ограничениям.
При включённом режиме выбора времени (enableTime: true)
ограничение maxDate распространяется не только на дату, но
и на временную часть.
flatpickr("#dateTimeInput", {
enableTime: true,
maxDate: "2026-12-31 18:00"
});В этом случае 31 декабря 2026 года доступен только до 18:00 включительно. Все более поздние временные значения блокируются.
Если задана только дата без времени, Flatpickr по умолчанию устанавливает границу на конец суток (23:59:59), что может влиять на доступность выбора в последнем дне диапазона.
Часто требуется ограничить выбор дат будущим относительно текущего
дня. Для этого используется либо today, либо вычисление
через JavaScript.
flatpickr("#dateInput", {
maxDate: "today"
});Альтернативный вариант с явным объектом Date:
const today = new Date();
today.setHours(0, 0, 0, 0);
flatpickr("#dateInput", {
maxDate: today
});Обнуление времени важно, если необходимо строго ограничить только календарный день без влияния часов и минут.
В сложных формах ограничения могут зависеть от других полей. Например, выбор начальной даты влияет на конечную границу допустимого диапазона.
const endPicker = flatpickr("#endDate", {});
document.querySelector("#startDate").addEventListener("change", (e) => {
const start = new Date(e.target.value);
start.setDate(start.getDate() + 30);
endPicker.set("maxDate", start);
});Здесь максимальная дата второго календаря устанавливается как 30 дней после выбранной стартовой даты.
Такой подход часто используется в системах бронирования, где требуется ограничить длительность периода.
Flatpickr работает на основе локального времени клиента. Это
означает, что maxDate интерпретируется в часовом поясе
браузера пользователя.
При передаче строки или объекта Date необходимо
учитывать возможные расхождения времени между сервером и клиентом.
Особенно это важно в международных приложениях, где дата может быть
вычислена на сервере и передана в интерфейс.
const serverDate = new Date("2026-12-31T00:00:00Z");
flatpickr("#dateInput", {
maxDate: serverDate
});В этом случае дата будет конвертирована в локальное время пользователя, что может сместить границу на предыдущий или следующий день.
Параметр maxDate работает в связке с
disable, но выполняет более высокоуровневую роль. Если
disable задаёт произвольные исключения, то
maxDate формирует глобальную границу.
flatpickr("#dateInput", {
maxDate: "2026-12-31",
disable: [
"2026-12-25"
]
});Здесь 25 декабря будет недоступен независимо от диапазона, а все даты после 31 декабря — автоматически исключены как выходящие за пределы диапазона.
Хотя maxDate не зависит напрямую от локализации, формат
строки даты может интерпретироваться по-разному в зависимости от
настроек dateFormat.
flatpickr("#dateInput", {
dateFormat: "d.m.Y",
maxDate: "31.12.2026"
});В подобных случаях важно соблюдать соответствие формата даты, иначе значение может быть некорректно распознано и ограничение не сработает.
В более сложных сценариях maxDate может задаваться через
функцию, возвращающую вычисляемое значение.
flatpickr("#dateInput", {
maxDate: () => {
const date = new Date();
date.setMonth(date.getMonth() + 2);
return date;
}
});Это позволяет динамически вычислять границы на основе текущего состояния системы, пользовательских данных или внешних условий.
Ограничение верхней границы выбора напрямую влияет на пользовательский опыт. Интерфейс календаря автоматически скрывает или блокирует недоступные даты, снижая вероятность ошибок ввода.
При этом важно учитывать, что визуальная блокировка не заменяет
серверную валидацию. Значение maxDate является клиентским
ограничением и может быть обойдён при ручной отправке данных, поэтому
сервер всегда должен повторно проверять диапазон дат.
В режимах с диапазонами (mode: "range")
maxDate ограничивает как начало, так и конец выбранного
интервала.
flatpickr("#dateRange", {
mode: "range",
maxDate: "2026-12-31"
});Пользователь не сможет выбрать диапазон, выходящий за пределы указанной даты, даже если начальная дата находится внутри допустимого интервала.
Параметр работает на нескольких уровнях одновременно: визуальном (календарь), логическом (валидация выбора) и программном (API обновления состояния). Его гибкость позволяет задавать как фиксированные ограничения, так и динамические правила, зависящие от внешних факторов.