Параметр conjunction для range

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

При работе с диапазонами дат (range) библиотека Flatpickr по умолчанию использует параметр rangeSeparator, который отвечает за разделитель между начальной и конечной датой диапазона. Тем не менее понимание роли conjunction важно, поскольку разработчики нередко пытаются применять его для изменения отображения диапазона и сталкиваются с тем, что результат оказывается не таким, как ожидалось.

Как работает отображение нескольких дат

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

Пример:

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

После выбора трёх дат поле может содержать:

2026-05-10, 2026-05-15, 2026-05-20

Запятая и пробел используются по умолчанию.

Именно этот разделитель можно изменить через conjunction.

Базовый пример использования

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

Результат:

2026-05-10 | 2026-05-15 | 2026-05-20

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

Почему conjunction часто путают с настройкой диапазона

Рассмотрим следующий код:

flatpickr("#calendar", {
    mode: "range",
    conjunction: " -> "
});

Многие ожидают увидеть:

2026-05-10 -> 2026-05-20

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

В режиме range используется отдельная настройка:

rangeSeparator

Поэтому для диапазона правильным вариантом будет:

flatpickr("#calendar", {
    mode: "range",
    rangeSeparator: " -> "
});

Результат:

2026-05-10 -> 2026-05-20

Отличие conjunction от rangeSeparator

conjunction

Используется для объединения множества независимых дат.

Пример:

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

Результат:

01.06.2026; 05.06.2026; 10.06.2026

rangeSeparator

Используется для объединения начала и конца диапазона.

Пример:

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

Результат:

01.06.2026 — 10.06.2026

Это два разных механизма, работающих независимо друг от друга.

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

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

Пример:

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

Результат:

01.06.2026 и 05.06.2026 и 10.06.2026

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

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

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

Пример с вертикальной чертой:

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

Результат:

01.06.2026 | 05.06.2026 | 10.06.2026

Пример со стрелкой:

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

Результат:

01.06.2026 → 05.06.2026 → 10.06.2026

Пример со слешем:

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

Результат:

01.06.2026 / 05.06.2026 / 10.06.2026

Пустой разделитель

Допустимо использовать пустую строку.

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

Результат:

01.06.202605.06.202610.06.2026

Подобное решение обычно приводит к ухудшению читаемости и применяется редко.

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

Параметр хорошо сочетается с dateFormat.

flatpickr("#calendar", {
    mode: "multiple",
    dateFormat: "d.m.Y",
    conjunction: ", "
});

Результат:

03.06.2026, 10.06.2026, 15.06.2026

Более компактный вариант:

flatpickr("#calendar", {
    mode: "multiple",
    dateFormat: "d/m",
    conjunction: " | "
});

Результат:

03/06 | 10/06 | 15/06

Работа с альтернативным полем (altInput)

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

flatpickr("#calendar", {
    mode: "multiple",
    altInput: true,
    altFormat: "F j, Y",
    dateFormat: "Y-m-d",
    conjunction: " • "
});

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

June 3, 2026 • June 10, 2026 • June 15, 2026

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

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

Иногда требуется получить строку в определённом формате для последующей передачи на сервер.

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

Полученная строка:

2026-06-01; 2026-06-05; 2026-06-10

Такой формат может быть удобен для последующего разбиения методом:

value.split("; ");

Совместное использование с обработчиками событий

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

flatpickr("#calendar", {
    mode: "multiple",
    conjunction: " | ",
    onChange(selectedDates) {
        console.log(selectedDates);
    }
});

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

[
    Date,
    Date,
    Date
]

Независимо от выбранного разделителя.

Когда conjunction не оказывает влияния

Параметр не используется в следующих случаях:

Режим single

flatpickr("#calendar", {
    mode: "single",
    conjunction: " | "
});

Выбирается только одна дата, поэтому объединять нечего.

Режим range

flatpickr("#calendar", {
    mode: "range",
    conjunction: " | "
});

Для диапазона применяется rangeSeparator.

Работа напрямую через массив дат

instance.selectedDates

Значение:

[
    Date,
    Date,
    Date
]

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

Типичные ошибки

Попытка изменить разделитель диапазона через conjunction

Неверно:

flatpickr("#calendar", {
    mode: "range",
    conjunction: " -> "
});

Правильно:

flatpickr("#calendar", {
    mode: "range",
    rangeSeparator: " -> "
});

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

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

Результат может выглядеть перегруженным:

01.06.2026 ||||| 05.06.2026 ||||| 10.06.2026

Отсутствие пробелов

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

Результат:

01.06.2026,05.06.2026,10.06.2026

Читаемость заметно снижается.

Практические рекомендации

Для классического отображения списка дат

conjunction: ", "

Для визуального разделения элементов

conjunction: " | "

Для компактных интерфейсов

conjunction: " • "

Для передачи данных в текстовом формате

conjunction: "; "

Для диапазонов дат

Использовать не conjunction, а:

rangeSeparator

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

Оглавление