Режим multiple

Режим multiple в Flatpickr предназначен для выбора нескольких независимых дат в рамках одного календаря. В отличие от режима диапазона (range), где между начальной и конечной датой предполагается непрерывный промежуток времени, режим multiple позволяет отмечать любое количество отдельных дат без обязательной связи между ними.

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

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

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

Активация режима multiple

Для включения режима необходимо установить параметр mode в значение "multiple".

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

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

Как работает выбор дат

В обычном режиме (single) каждый новый выбор заменяет предыдущий.

Например:

Выбрана дата:
15.07.2025

Если затем выбрать:

20.07.2025

то первая дата исчезнет.

В режиме multiple логика меняется:

15.07.2025
20.07.2025
25.07.2025

Все выбранные даты сохраняются одновременно.

Базовый пример

<input id="dates">
flatpickr("#dates", {
    mode: "multiple",
    dateFormat: "d.m.Y"
});

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

05.06.2025, 10.06.2025, 15.06.2025

По умолчанию Flatpickr разделяет даты запятыми.

Внутреннее хранение выбранных дат

Flatpickr сохраняет все выбранные даты в массиве selectedDates.

Пример:

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

После выбора нескольких дат:

01.07.2025
05.07.2025
10.07.2025

массив будет выглядеть так:

picker.selectedDates

Результат:

[
    Date(...),
    Date(...),
    Date(...)
]

Каждый элемент представляет полноценный объект Date.

Получение всех выбранных дат

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

flatpickr("#dates", {
    mode: "multiple",

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

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

Пример содержимого:

[
    Tue Jul 01 2025,
    Sat Jul 05 2025,
    Thu Jul 10 2025
]

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

Flatpickr позволяет отображать даты в любом формате.

Пример:

flatpickr("#dates", {
    mode: "multiple",
    dateFormat: "Y-m-d"
});

Результат:

2025-07-01, 2025-07-05, 2025-07-10

Другой формат:

flatpickr("#dates", {
    mode: "multiple",
    dateFormat: "d/m/Y"
});

Результат:

01/07/2025, 05/07/2025, 10/07/2025

Формат отображения не влияет на внутреннее хранение объектов Date.

Разделитель между датами

Параметр conjunction позволяет заменить стандартную запятую.

По умолчанию:

01.07.2025, 05.07.2025, 10.07.2025

С собственным разделителем:

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

Результат:

01.07.2025 | 05.07.2025 | 10.07.2025

Другой вариант:

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

Результат:

01.07.2025; 05.07.2025; 10.07.2025

Установка начального набора дат

Параметр defaultDate поддерживает массив значений.

flatpickr("#dates", {
    mode: "multiple",

    defaultDate: [
        "2025-07-01",
        "2025-07-10",
        "2025-07-20"
    ]
});

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

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

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

flatpickr("#dates", {
    mode: "multiple",

    defaultDate: [
        new Date(2025, 6, 1),
        new Date(2025, 6, 10),
        new Date(2025, 6, 20)
    ]
});

Такой подход удобен при динамической генерации данных.

Программное добавление дат

Метод setDate() позволяет назначить несколько дат программно.

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

picker.setDate([
    "2025-07-01",
    "2025-07-10",
    "2025-07-20"
]);

Flatpickr автоматически выделит их в календаре.

Очистка выбранных дат

Полностью удалить все выбранные даты можно методом clear().

picker.clear();

После вызова:

selectedDates.length === 0

Календарь возвращается в исходное состояние.

Ограничение доступных дат

Режим multiple может работать совместно с ограничениями.

Пример минимальной даты:

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

Выбор прошедших дней станет невозможен.

Максимальная дата:

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

Совмещение с disable

Можно запретить выбор отдельных дат.

flatpickr("#dates", {
    mode: "multiple",

    disable: [
        "2025-07-05",
        "2025-07-10"
    ]
});

Даже в режиме множественного выбора эти даты останутся недоступными.

Совмещение с enable

Иногда требуется разрешить только конкретные дни.

flatpickr("#dates", {
    mode: "multiple",

    enable: [
        "2025-07-01",
        "2025-07-05",
        "2025-07-10"
    ]
});

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

Использование обработчика onChange

Для отслеживания изменений обычно применяется событие onChange.

flatpickr("#dates", {
    mode: "multiple",

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

После выбора нескольких дат:

2025-07-01, 2025-07-05, 2025-07-10

второй аргумент содержит готовую строку, отображаемую в поле.

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

Часто необходимо знать число выбранных дней.

flatpickr("#dates", {
    mode: "multiple",

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

Результат:

1
2
3
4

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

Проверка наличия выбранной даты

Можно определить, присутствует ли определённый день среди выбранных.

const target = "2025-07-10";

flatpickr("#dates", {
    mode: "multiple",

    onChange(selectedDates) {

        const exists = selectedDates.some(date =>
            flatpickr.formatDate(date, "Y-m-d") === target
        );

        console.log(exists);
    }
});

Результат:

true

или

false

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

Режим multiple поддерживает временные значения.

flatpickr("#dates", {
    mode: "multiple",
    enableTime: true
});

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

2025-07-01 10:00,
2025-07-05 14:30,
2025-07-10 18:00

Каждая дата хранит собственное время.

Использование altInput

Для разделения внутреннего и отображаемого форматов удобно применять altInput.

flatpickr("#dates", {
    mode: "multiple",

    altInput: true,
    altFormat: "d.m.Y",
    dateFormat: "Y-m-d"
});

Пользователь увидит:

01.07.2025, 05.07.2025, 10.07.2025

А в форме будет отправлено:

2025-07-01,2025-07-05,2025-07-10

Визуальное отображение выбранных дат

В режиме multiple каждая выбранная дата получает CSS-класс:

.flatpickr-day.selected

Это позволяет изменять оформление.

Пример:

.flatpickr-day.selected {
    border-radius: 50%;
}

Либо:

.flatpickr-day.selected {
    font-weight: bold;
}

Поскольку даты независимы друг от друга, Flatpickr не рисует непрерывный диапазон, как в режиме range.

Отличия multiple от range

Multiple

01.07
05.07
20.07
28.07

Выбранные даты не связаны между собой.

Range

01.07 — 28.07

Все даты между началом и концом считаются частью одного интервала.

Основное различие заключается в модели хранения данных: multiple работает со списком отдельных значений, а range — с границами диапазона.

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

Выбор рабочих смен

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

Сотрудник отмечает дни выхода на работу.

Планирование мероприятий

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

Выбираются даты проведения встреч и событий.

Бронирование отдельных дней

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

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

Составление расписания занятий

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

Позволяет отметить все учебные дни в течение месяца.

Производительность при большом количестве дат

Flatpickr эффективно работает даже при выборе десятков дат одновременно. Однако при использовании сложных обработчиков onChange, большого числа отключённых дат (disable) или динамических вычислений рекомендуется:

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

Режим multiple является одним из наиболее гибких механизмов Flatpickr для работы с несвязанными календарными датами и позволяет организовывать сложные сценарии выбора без необходимости создавать несколько отдельных календарей или дополнительные элементы интерфейса.

Оглавление