Инициализация через data-атрибуты

Инициализация Flatpickr через data-атрибуты позволяет полностью перенести конфигурацию календаря в разметку HTML, минимизируя JavaScript-код и упрощая декларативное описание поведения компонентов. Такой подход особенно полезен в шаблонизированных системах, CMS и при работе с серверно-рендеренными страницами, где логика должна быть максимально приближена к DOM.

Flatpickr не имеет «магии» автозапуска по умолчанию только на основании HTML, но предоставляет возможность передавать конфигурацию через data-* атрибуты при инициализации элементов. Это означает, что JavaScript по-прежнему выполняет инициализацию, однако параметры берутся непосредственно из DOM.

Базовая идея заключается в следующем:

  • HTML содержит input и набор data-* атрибутов
  • JavaScript вызывает flatpickr() без или с минимальной конфигурацией
  • библиотека считывает атрибуты и преобразует их в настройки

Базовая инициализация через data-атрибуты

HTML-разметка:

<input type="text"
       class="datepicker"
       data-date-format="Y-m-d"
       data-default-date="2026-05-30">

Jav * aScript:

flatpickr(".datepicker");

В этом случае Flatpickr автоматически прочитает параметры:

  • data-date-format → формат отображения даты
  • data-default-date → значение по умолчанию

Это минимальный вариант, при котором вся конфигурация сосредоточена в HTML.

Поддерживаемые data-атрибуты

Flatpickr поддерживает набор стандартных атрибутов, соответствующих ключам конфигурации. Они преобразуются из kebab-case в camelCase.

Формат и отображение

<input data-date-format="d.m.Y"
       data-alt-format="F j, Y"
       data-alt-input="true">
  • data-date-format — основной формат даты
  • data-alt-format — альтернативный формат отображения
  • data-alt-input — включение альтернативного input-поля

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

<input data-min-date="2026-01-01"
       data-max-date="2026-12-31">
  • data-min-date — минимально допустимая дата
  • data-max-date — максимально допустимая дата

Flatpickr интерпретирует строки дат в стандартном ISO-формате или в формате, совместимом с JavaScript Date.

Поведение календаря

<input data-enable-time="true"
       data-no-calendar="false"
       data-time_24hr="true">
  • data-enable-time — добавляет выбор времени
  • data-no-calendar — отключает календарную сетку
  • data-time_24hr — переключает 24-часовой формат

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

Инициализация через общий объект конфигурации и data-атрибуты

Часто используется комбинированный подход: базовые параметры задаются в JavaScript, а специфичные — в HTML.

flatpickr(".datepicker", {
  enableTime: true,
  dateFormat: "Y-m-d"
});

HTML:

<input class="datepicker"
       data-min-date="today"
       data-max-date="2026-12-31">

Такой подход позволяет:

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

Работа с режимами выбора (mode)

Flatpickr поддерживает несколько режимов выбора дат:

<input data-mode="single">
<input data-mode="multiple">
<input data-mode="range">
  • single — выбор одной даты
  • multiple — выбор нескольких дат
  • range — выбор диапазона

Особенно часто используется range для форм бронирования и фильтрации дат.

Использование wrap-режима через data-структуру

Flatpickr поддерживает режим wrap, когда календарь привязан не к input напрямую, а к контейнеру.

HTML:

<div class="flatpickr" data-wrap="true">
  <input type="text" data-input>
  <a class="input-button" data-toggle>?</a>
</div>

Jav * aScript:

flatpickr(".flatpickr", {
  wrap: true
});

Ключевые элементы:

  • data-wrap="true" — включает обработку контейнера
  • data-input — определяет поле ввода
  • data-toggle — элемент, открывающий календарь

Этот режим часто используется в UI-компонентах с кнопками и иконками.

Автоматическое открытие и поведение фокуса

<input data-inline="true"
       data-click-opens="false">
  • data-inline — отображает календарь сразу в DOM без всплытия
  • data-click-opens — отключает открытие по клику

Inline-режим применяется в виджетах и панелях фильтрации.

Передача сложных значений через data-атрибуты

Некоторые параметры Flatpickr требуют массивов или объектов. В data-атрибутах они сериализуются в строку.

Пример отключённых дат

<input data-disable="2026-01-01,2026-01-10,2026-01-20">

Значения разделяются запятыми и интерпретируются как список дат.

Пример диапазонов

<input data-disable="2026-01-01 to 2026-01-05">

Flatpickr понимает выражение to как диапазон исключений.

Локализация через data-атрибуты

Хотя локали чаще подключаются через JavaScript, часть настроек может задаваться декларативно:

<input data-date-format="d.m.Y"
       data-week-start="1">
  • data-week-start — определяет первый день недели (0–воскресенье, 1–понедельник)

Для полноценной локализации всё же требуется подключение модуля локали в JavaScript, но data-атрибуты позволяют уточнять поведение отображения.

Ограничения data-инициализации

Использование data-атрибутов имеет ряд ограничений, связанных с архитектурой Flatpickr:

  • невозможно полностью описать сложные callback-функции (onChange, onOpen) через HTML
  • сложные структуры данных требуют сериализации в строки
  • некоторые опции требуют явного JavaScript-объявления

Таким образом, data-инициализация подходит для конфигурации, но не для логики.

Паттерн гибридной архитектуры

На практике используется схема:

  • HTML (data-атрибуты) → статическая конфигурация
  • JavaScript → динамическая логика и события
flatpickr(".datepicker", {
  onChange: function(selectedDates, dateStr) {
    console.log("Выбрана дата:", dateStr);
  }
});
<input class="datepicker"
       data-date-format="Y-m-d"
       data-min-date="today">

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

Массовая инициализация через data-селекторы

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

document.querySelectorAll("[data-datepicker]").forEach(el => {
  flatpickr(el);
});

HTML:

<input data-datepicker data-date-format="Y-m-d">
<input data-datepicker data-date-format="d.m.Y">

Здесь data-datepicker выступает маркером поведения, а остальные data-* задают конфигурацию.

Роль data-атрибутов в архитектуре UI

Использование data-инициализации в Flatpickr формирует декларативный слой интерфейса:

  • HTML описывает поведение
  • JavaScript активирует компонент
  • библиотека интерпретирует параметры

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

Оглавление