Параметр minDate и maxDate

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

minDate: минимально допустимая дата

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

Базовое использование

flatpickr("#datepicker", {
  minDate: "2026-01-01"
});

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

Поддерживаемые форматы значения

Flatpickr принимает несколько типов значений для minDate:

1. Строка даты

minDate: "2026-05-01"

Строка интерпретируется согласно формату ISO или формату, заданному в конфигурации dateFormat.

2. Объект Date

minDate: new Date(2026, 4, 1)

Использование нативного объекта Date позволяет более гибко формировать дату динамически, например:

const today = new Date();

flatpickr("#datepicker", {
  minDate: today
});

3. Относительные значения

Flatpickr поддерживает смещения относительно текущей даты:

minDate: "today"

Также доступны выражения с добавлением дней:

minDate: new Date().fp_incr(7)

Метод fp_incr является расширением Flatpickr и позволяет прибавлять или вычитать дни.

Типовые сценарии использования minDate

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

flatpickr("#booking", {
  minDate: "today"
});

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

Ограничение начала периода

flatpickr("#vacation", {
  minDate: "2026-06-01"
});

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

Динамическое ограничение

const registrationStart = new Date();
registrationStart.setDate(registrationStart.getDate() + 3);

flatpickr("#form", {
  minDate: registrationStart
});

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

maxDate: максимальная допустимая дата

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

Базовое использование

flatpickr("#datepicker", {
  maxDate: "2026-12-31"
});

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

Поддерживаемые форматы значения

Как и minDate, maxDate принимает несколько типов данных.

1. Строка

maxDate: "2026-12-31"

2. Объект Date

maxDate: new Date(2026, 11, 31)

3. Относительное значение

maxDate: "today"

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

4. Динамическое смещение

maxDate: new Date().fp_incr(30)

Ограничение выбора диапазоном в 30 дней от текущего момента.

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

Наиболее распространённый сценарий — определение диапазона доступных дат.

Фиксированный диапазон

flatpickr("#event", {
  minDate: "2026-06-01",
  maxDate: "2026-06-30"
});

Выбор ограничен одним календарным месяцем.

Скользящий диапазон от текущей даты

flatpickr("#promo", {
  minDate: "today",
  maxDate: new Date().fp_incr(14)
});

Пользователь может выбрать дату только в пределах двух недель.

Динамическое управление диапазоном

const now = new Date();
const inOneWeek = new Date();
inOneWeek.setDate(now.getDate() + 7);

const inOneMonth = new Date();
inOneMonth.setMonth(now.getMonth() + 1);

flatpickr("#dynamic", {
  minDate: inOneWeek,
  maxDate: inOneMonth
});

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

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

Связь с disable

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

flatpickr("#calendar", {
  minDate: "today",
  maxDate: "2026-12-31",
  disable: ["2026-07-10", "2026-07-15"]
});

Влияние на режим range

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

flatpickr("#range", {
  mode: "range",
  minDate: "2026-01-01",
  maxDate: "2026-12-31"
});

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

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

Если defaultDate выходит за пределы minDate/maxDate, Flatpickr автоматически корректирует поведение:

  • дата может быть проигнорирована
  • либо приводится к ближайшей допустимой границе
flatpickr("#input", {
  minDate: "2026-01-01",
  maxDate: "2026-12-31",
  defaultDate: "2027-01-10"
});

В этом случае значение вне диапазона не будет установлено как выбранное.

Использование относительных выражений

Flatpickr поддерживает строковые выражения для удобного задания диапазонов.

today как опорная точка

minDate: "today"

Используется как базовая точка отсчёта.

Комбинация fp_incr

minDate: "today",
maxDate: "today".fp_incr(10)

Корректное использование требует вызова метода у объекта Date:

maxDate: new Date().fp_incr(10)

Практика построения бизнес-логики диапазонов

Запрет выбора выходных через диапазон дат

flatpickr("#workdays", {
  minDate: "today",
  maxDate: new Date().fp_incr(60),
  disable: [
    function(date) {
      return (date.getDay() === 0 || date.getDay() === 6);
    }
  ]
});

Диапазон задаёт общие границы, а дополнительная логика исключает конкретные дни.

Ограничение бронирования в будущем

flatpickr("#booking", {
  minDate: "today",
  maxDate: new Date().fp_incr(180)
});

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

Финансовые периоды

flatpickr("#report", {
  minDate: "2026-01-01",
  maxDate: "2026-12-31"
});

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

Особенности обработки границ

Flatpickr интерпретирует границы следующим образом:

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

Это означает, что:

minDate: "2026-01-01"

включает сам день 1 января, а не исключает его.

Поведение при изменении конфигурации

При динамическом обновлении настроек через set():

const fp = flatpickr("#input", {});

fp.set("minDate", "today");
fp.set("maxDate", "2026-12-31");

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

Ошибки и особенности использования

Некорректные строки дат

minDate: "2026-13-40"

Такие значения приводят к игнорированию ограничения или его некорректной интерпретации.

Конфликт minDate и maxDate

minDate: "2026-12-31",
maxDate: "2026-01-01"

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

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

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

Итоговая модель поведения диапазонов

Комбинация minDate и maxDate формирует базовую систему фильтрации дат, которая:

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

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

Оглавление