Режим range

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

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

Базовая настройка выглядит следующим образом:

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

После активации режима первый клик устанавливает дату начала диапазона, а второй — дату окончания.

Принцип работы диапазона

После выбора первой даты Flatpickr переходит в состояние ожидания второй даты.

Например:

10.05.2026 → начало диапазона
15.05.2026 → конец диапазона

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

10.05.2026 — 15.05.2026

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

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

Минимальная конфигурация

Наиболее простая настройка:

flatpickr("#booking", {
    mode: "range",
    dateFormat: "d.m.Y"
});

В поле ввода будет отображаться:

12.06.2026 to 18.06.2026

Разделитель по умолчанию зависит от локализации и внутренних настроек Flatpickr.

Настройка формата отображения

Для диапазонов особенно важно корректное форматирование дат.

Пример:

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

Результат:

2026-06-12 to 2026-06-18

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

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

Результат:

12/06/2026 to 18/06/2026

Параметр rangeSeparator

Разделитель между датами можно изменить при помощи свойства locale.rangeSeparator.

По умолчанию обычно используется строка:

 to

Собственная настройка:

flatpickr("#booking", {
    mode: "range",
    locale: {
        rangeSeparator: " — "
    }
});

Теперь результат будет выглядеть так:

12.06.2026 — 18.06.2026

Другие варианты:

rangeSeparator: " - "
rangeSeparator: " → "
rangeSeparator: " / "

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

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

Пример:

flatpickr("#booking", {
    mode: "range",

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

После выбора периода:

[
  Date(2026-06-12),
  Date(2026-06-18)
]

Индексы массива:

selectedDates[0]

Начальная дата.

selectedDates[1]

Конечная дата.

Работа с onChange

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

flatpickr("#booking", {
    mode: "range",

    onChange(selectedDates) {

        if (selectedDates.length === 2) {

            const start = selectedDates[0];
            const end = selectedDates[1];

            console.log(start);
            console.log(end);

        }

    }
});

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

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

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

flatpickr("#booking", {
    mode: "range",

    onClose(selectedDates) {

        if (selectedDates.length === 2) {

            console.log("Диапазон выбран");

        }

    }
});

Подход полезен в интерфейсах бронирования гостиниц и авиабилетов.

Установка начального диапазона

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

flatpickr("#booking", {
    mode: "range",

    defaultDate: [
        "2026-06-10",
        "2026-06-15"
    ]
});

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

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

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

flatpickr("#booking", {
    mode: "range",

    defaultDate: [
        new Date(2026, 5, 10),
        new Date(2026, 5, 15)
    ]
});

Следует помнить, что нумерация месяцев начинается с нуля.

Программная установка диапазона

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

const picker = flatpickr("#booking", {
    mode: "range"
});

picker.setDate([
    "2026-07-01",
    "2026-07-15"
]);

Календарь автоматически обновит выделение.

Очистка диапазона

Удаление выбранных дат выполняется через метод clear().

picker.clear();

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

selectedDates = []

Поле ввода очищается, а выделение исчезает.

Ограничение диапазона через minDate

Диапазон может начинаться только после определённой даты.

flatpickr("#booking", {
    mode: "range",

    minDate: "today"
});

Все прошедшие даты становятся недоступными.

Ограничение диапазона через maxDate

Аналогично задаётся верхняя граница.

flatpickr("#booking", {
    mode: "range",

    maxDate: "2026-12-31"
});

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

Комбинация minDate и maxDate

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

flatpickr("#booking", {
    mode: "range",

    minDate: "2026-01-01",
    maxDate: "2026-12-31"
});

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

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

Отдельные даты можно исключить из выбора.

flatpickr("#booking", {
    mode: "range",

    disable: [
        "2026-07-04",
        "2026-07-05"
    ]
});

Недоступные даты нельзя включить в диапазон.

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

Разрешение только определённых дат.

flatpickr("#booking", {
    mode: "range",

    enable: [
        "2026-08-01",
        "2026-08-02",
        "2026-08-03",
        "2026-08-04"
    ]
});

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

Выбор диапазона между несколькими месяцами

Flatpickr поддерживает интервалы, пересекающие месяцы.

Например:

28.05.2026 → 04.06.2026

Календарь корректно подсветит дни сразу в двух месяцах.

Выбор диапазона между годами

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

Пример:

28.12.2026 → 05.01.2027

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

Одновременное отображение нескольких месяцев

Для удобства выбора длинных интервалов часто отображают сразу несколько календарей.

flatpickr("#booking", {
    mode: "range",

    showMonths: 2
});

Либо:

flatpickr("#booking", {
    mode: "range",

    showMonths: 3
});

Такой интерфейс особенно распространён в системах бронирования жилья и транспорта.

Режим range с inline

Календарь можно разместить непосредственно на странице.

flatpickr("#booking", {
    mode: "range",
    inline: true
});

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

Режим range с altInput

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

flatpickr("#booking", {
    mode: "range",

    altInput: true,

    dateFormat: "Y-m-d",

    altFormat: "d.m.Y"
});

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

12.06.2026 — 18.06.2026

А значение формы остаётся:

2026-06-12 to 2026-06-18

Автоматический расчёт длительности периода

Частая задача — вычисление количества дней между датами.

flatpickr("#booking", {
    mode: "range",

    onChange(selectedDates) {

        if (selectedDates.length === 2) {

            const start = selectedDates[0];
            const end = selectedDates[1];

            const diff =
                end.getTime() - start.getTime();

            const days =
                diff / (1000 * 60 * 60 * 24);

            console.log(days);

        }

    }
});

Для периода:

10.06.2026 → 15.06.2026

Результат:

5

Определение начала и конца диапазона

После выбора диапазона Flatpickr автоматически назначает специальные CSS-классы.

Начальная дата:

.startRange

Конечная дата:

.endRange

Промежуточные даты:

.inRange

Это позволяет гибко изменять внешний вид выделения.

Кастомизация диапазона через CSS

Изменение цвета диапазона:

.flatpickr-day.inRange {
    background: #3498db;
    border-color: #3498db;
}

Изменение начала диапазона:

.flatpickr-day.startRange {
    background: #2ecc71;
}

Изменение конца диапазона:

.flatpickr-day.endRange {
    background: #e74c3c;
}

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

Бронирование гостиницы

flatpickr("#hotel", {
    mode: "range",
    minDate: "today"
});

Планирование отпуска

flatpickr("#vacation", {
    mode: "range",
    dateFormat: "d.m.Y"
});

Формирование отчётного периода

flatpickr("#report", {
    mode: "range",

    defaultDate: [
        "2026-01-01",
        "2026-01-31"
    ]
});

Фильтрация данных по времени

flatpickr("#filter", {
    mode: "range",

    onChange(selectedDates) {

        if (selectedDates.length === 2) {

            loadData(
                selectedDates[0],
                selectedDates[1]
            );

        }

    }
});

Особенности режима range

Первый клик всегда задаёт начало диапазона.

Второй клик завершает диапазон.

В массиве selectedDates может находиться одна или две даты.

Flatpickr автоматически подсвечивает все промежуточные дни.

Диапазон может пересекать месяцы и годы.

Поддерживаются все стандартные ограничения (minDate, maxDate, disable, enable).

Допускается программное управление через setDate(), clear() и другие методы экземпляра Flatpickr.

Для отображения диапазона используются специальные CSS-классы startRange, endRange и inRange, позволяющие полностью переопределять визуальное оформление выбранного периода.

Оглавление