Параметр mode: single, multiple, range

Параметр mode в Flatpickr определяет фундаментальное поведение календаря: какой тип выбора дат будет доступен пользователю. От его значения зависит логика работы компонента, структура возвращаемых данных и взаимодействие с пользовательским интерфейсом.

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

Поведение

  • допускается выбор только одной даты;
  • при повторном выборе старое значение перезаписывается;
  • возвращаемое значение — строка или объект Date (в зависимости от настроек dateFormat и altInput);
  • интерфейс остаётся максимально простым и компактным.

Конфигурация

flatpickr("#input", {
  mode: "single"
});

Особенности обработки данных

В single режиме значение selectedDates содержит массив из одного элемента или пустой массив:

selectedDates = [Date]

Даже при одиночном выборе библиотека сохраняет унифицированную структуру массива, что упрощает работу с API.

Применение

Режим используется в сценариях:

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

Режим multiple

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

Поведение

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

Конфигурация

flatpickr("#input", {
  mode: "multiple"
});

Логика хранения значений

В этом режиме selectedDates становится полноценным массивом:

selectedDates = [Date, Date, Date]

При этом строковое значение input.value формируется на основе dateFormat и разделителя, заданного параметром conjunction.

Разделитель значений

Параметр conjunction управляет тем, как даты объединяются в строке:

flatpickr("#input", {
  mode: "multiple",
  conjunction: ", "
});

Пример результата:

2026-01-01, 2026-01-05, 2026-01-10

Особенности работы

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

Применение

Режим используется в задачах:

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

Режим range

Режим range предназначен для выбора интервала между двумя датами: начальной и конечной. Этот режим существенно отличается от multiple, так как формирует непрерывный временной отрезок.

Поведение

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

Конфигурация

flatpickr("#input", {
  mode: "range"
});

Структура данных

В режиме диапазона selectedDates всегда содержит максимум два значения:

selectedDates = [startDate, endDate]

Если конечная дата ещё не выбрана:

selectedDates = [startDate]

Форматирование вывода

По умолчанию даты в поле ввода разделяются через toStringSeparator, который можно переопределить:

flatpickr("#input", {
  mode: "range",
  dateFormat: "Y-m-d",
  locale: {
    rangeSeparator: " — "
  }
});

Пример результата:

2026-01-01 — 2026-01-10

Внутренняя логика выделения диапазона

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

Ключевые особенности:

  • поддерживается выбор как вперёд, так и назад (если конечная дата раньше начальной, значения меняются местами);
  • промежуточные даты не сохраняются отдельно в selectedDates;
  • визуальное выделение не требует ручной обработки.

Поведение при повторных кликах

Если диапазон уже выбран:

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

Применение

Режим используется в задачах:

  • выбор периода бронирования;
  • фильтрация дат в аналитике;
  • установка временных интервалов;
  • планирование отпусков и графиков.

Сравнительная логика режимов

Структура данных

  • single → один элемент в массиве
  • multiple → произвольное количество элементов
  • range → максимум два элемента (границы интервала)

Поведение интерфейса

  • single — замена значения
  • multiple — накопление значений
  • range — построение интервала

Семантика выбора

  • single — точка во времени
  • multiple — набор точек
  • range — непрерывный участок времени

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

dateFormat

Во всех режимах влияет на итоговое строковое представление. Особенно критичен в range, где определяет читаемость интервала.

minDate и maxDate

Ограничивают доступные даты:

  • в single — блокируют выбор отдельных значений;
  • в multiple — исключают некоторые элементы набора;
  • в range — ограничивают границы интервала.

disable

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

Поведение API selectedDates

Независимо от режима, Flatpickr всегда использует единый интерфейс:

instance.selectedDates

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

Влияние режима на пользовательские сценарии

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

  • интерфейсы форм с одним полем даты требуют single;
  • интерфейсы планирования используют multiple;
  • аналитические и календарные системы чаще опираются на range.

Каждый режим формирует собственную модель восприятия времени: точечную, дискретную или интервальную, что напрямую влияет на UX и структуру данных в приложении.

Оглавление