Параметр maxDate для multiple

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

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

Режим multiple активируется через параметр:

mode: "multiple"

а максимальная разрешённая дата задаётся через:

maxDate: "2025-12-31"

Полный пример:

flatpickr("#dates", {
    mode: "multiple",
    maxDate: "2025-12-31"
});

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

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

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

Например:

flatpickr("#dates", {
    mode: "multiple",
    maxDate: "2025-06-30"
});

Допустимы следующие наборы:

10.06.2025
15.06.2025
25.06.2025
30.06.2025

Недопустимы:

01.07.2025
10.07.2025
25.12.2025

Если дата выходит за пределы ограничения, Flatpickr не позволит её выбрать.

Указание даты строкой

Наиболее распространённый вариант — передача даты в виде строки.

flatpickr("#dates", {
    mode: "multiple",
    maxDate: "2025-12-31"
});

Формат строки должен соответствовать внутреннему формату Flatpickr.

Обычно используется:

YYYY-MM-DD

Например:

maxDate: "2026-03-15"

Использование объекта Date

Вместо строки можно передавать объект JavaScript Date.

flatpickr("#dates", {
    mode: "multiple",
    maxDate: new Date(2025, 11, 31)
});

Следует помнить, что месяцы в объекте Date нумеруются с нуля:

new Date(2025, 0, 1)   // январь
new Date(2025, 11, 31) // декабрь

Такой способ особенно удобен при вычислении даты программным путём.

Ограничение текущим днём

Часто требуется запретить выбор будущих дат.

Для этого используется специальное значение:

flatpickr("#dates", {
    mode: "multiple",
    maxDate: "today"
});

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

Подобный сценарий востребован в:

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

Ограничение относительно текущей даты

Flatpickr поддерживает относительные значения.

Например, разрешить выбор максимум до семи дней вперёд:

flatpickr("#dates", {
    mode: "multiple",
    maxDate: new Date().fp_incr(7)
});

Здесь используется встроенный метод:

fp_incr(7)

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

Другой пример:

flatpickr("#dates", {
    mode: "multiple",
    maxDate: new Date().fp_incr(30)
});

Разрешается выбор дат в пределах ближайшего месяца.

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

Очень часто максимальная дата применяется вместе с минимальной.

flatpickr("#dates", {
    mode: "multiple",
    minDate: "2025-01-01",
    maxDate: "2025-12-31"
});

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

Все даты до:

01.01.2025

и после:

31.12.2025

станут недоступными.

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

Рассмотрим ситуацию:

flatpickr("#dates", {
    mode: "multiple",
    minDate: "2025-06-01",
    maxDate: "2025-06-30"
});

Допустимый набор:

03.06.2025
10.06.2025
18.06.2025
25.06.2025

Недопустимый набор:

29.05.2025
05.06.2025
15.06.2025
01.07.2025

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

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

Ограничение можно менять после создания экземпляра календаря.

Создание:

const picker = flatpickr("#dates", {
    mode: "multiple"
});

Изменение максимальной даты:

picker.set("maxDate", "2025-12-31");

Позже значение может быть обновлено:

picker.set("maxDate", "2026-06-30");

После вызова set() календарь автоматически перестраивается.

Получение ограничения из внешнего источника

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

Например:

fetch("/api/settings")
    .then(response => response.json())
    .then(data => {
        flatpickr("#dates", {
            mode: "multiple",
            maxDate: data.maxDate
        });
    });

Ответ сервера:

{
    "maxDate": "2025-12-31"
}

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

Использование функции для вычисления ограничения

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

Например, конец текущего года:

const currentYear = new Date().getFullYear();

flatpickr("#dates", {
    mode: "multiple",
    maxDate: `${currentYear}-12-31`
});

Или конец текущего месяца:

const now = new Date();

const lastDay = new Date(
    now.getFullYear(),
    now.getMonth() + 1,
    0
);

flatpickr("#dates", {
    mode: "multiple",
    maxDate: lastDay
});

Влияние на отображение календаря

После установки maxDate Flatpickr визуально выделяет недоступные дни.

Для таких дат:

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

Пример:

flatpickr("#dates", {
    mode: "multiple",
    maxDate: "2025-09-30"
});

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

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

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

Корректный пример:

flatpickr("#dates", {
    mode: "multiple",
    maxDate: "2025-12-31",
    defaultDate: [
        "2025-06-10",
        "2025-08-15",
        "2025-12-20"
    ]
});

Некорректный пример:

flatpickr("#dates", {
    mode: "multiple",
    maxDate: "2025-12-31",
    defaultDate: [
        "2025-06-10",
        "2026-01-10"
    ]
});

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

Использование вместе с enable

Параметры enable и maxDate могут работать одновременно.

flatpickr("#dates", {
    mode: "multiple",
    maxDate: "2025-12-31",
    enable: [
        "2025-10-01",
        "2025-10-05",
        "2025-10-10"
    ]
});

В этом случае дата должна одновременно:

  1. находиться в списке разрешённых;
  2. не превышать значение maxDate.

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

Использование вместе с disable

Аналогичным образом ограничение сочетается с отключёнными датами.

flatpickr("#dates", {
    mode: "multiple",
    maxDate: "2025-12-31",
    disable: [
        "2025-10-05",
        "2025-10-10"
    ]
});

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

Проверка выбранных дат через событие onChange

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

flatpickr("#dates", {
    mode: "multiple",
    maxDate: "2025-12-31",

    onChange(selectedDates) {
        console.log(selectedDates);
    }
});

В режиме multiple параметр selectedDates содержит массив объектов Date.

Пример:

[
    Date,
    Date,
    Date
]

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

Типичные сценарии применения

Архивные документы

flatpickr("#archive", {
    mode: "multiple",
    maxDate: "today"
});

Выбор возможен только среди уже существующих дат.

Учёт выполненных работ

flatpickr("#tasks", {
    mode: "multiple",
    maxDate: new Date()
});

Будущие даты исключаются.

Регистрация событий за отчётный период

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

Все отмечаемые даты должны принадлежать конкретному отчётному году.

Планирование на ограниченный срок

flatpickr("#planning", {
    mode: "multiple",
    maxDate: new Date().fp_incr(14)
});

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

Частые ошибки

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

Ошибка:

maxDate: "31.12.2025"

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

maxDate: "2025-12-31"

minDate больше maxDate

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

flatpickr("#dates", {
    mode: "multiple",
    minDate: "2025-12-31",
    maxDate: "2025-01-01"
});

Границы диапазона должны быть логически согласованы.

Ожидание автоматического удаления ранее выбранных дат

Если ограничение изменяется динамически:

picker.set("maxDate", "2025-06-01");

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

Для контроля состояния обычно применяется:

picker.selectedDates

или

picker.clear();

Особенности работы maxDate в режиме multiple

Параметр maxDate не ограничивает количество выбираемых дат. Его задача заключается исключительно в контроле временной границы выбора.

Например:

flatpickr("#dates", {
    mode: "multiple",
    maxDate: "2025-12-31"
});

Можно выбрать:

01.01.2025
02.01.2025
15.03.2025
20.05.2025
30.08.2025
15.12.2025
31.12.2025

Количество дат не имеет значения, если каждая из них находится не позже установленного значения maxDate.

Именно поэтому данный параметр часто используется совместно с minDate, disable, enable, пользовательской валидацией и обработчиками событий, формируя полный набор правил выбора дат в режиме множественного выбора Flatpickr.

Оглавление