Основные классы

Flatpickr формирует календарь как набор вложенных DOM-узлов, где каждый уровень управляется набором предсказуемых CSS-классов. Центральный контейнер всегда создаётся динамически и привязывается к инпуту или отдельному контейнеру в режиме inline.

Ключевой корневой элемент календаря:

  • .flatpickr-calendar — основной контейнер виджета

Он является базой для всех состояний и модификаторов. Через него управляется:

  • отображение календаря
  • анимации открытия/закрытия
  • режимы отображения (inline, static, mobile)

Состояния корневого контейнера

Flatpickr добавляет модифицирующие классы в зависимости от поведения:

  • .open — календарь раскрыт и активен
  • .inline — календарь встроен в страницу и не привязан к popup-режиму
  • .static — позиционирование без абсолютного всплытия
  • .animate — включены CSS-анимации переходов

Эти классы комбинируются, формируя итоговое поведение интерфейса. Например, .flatpickr-calendar.open.animate описывает открытый календарь с анимацией перехода.

Обёртка инпута и связующие элементы

При инициализации Flatpickr модифицирует структуру вокруг исходного поля ввода.

Основные элементы:

  • .flatpickr-wrapper — внешний контейнер (если создаётся библиотекой)
  • .flatpickr-input — целевой input-элемент

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

Важные особенности поведения

  • инпут остаётся исходным источником данных
  • календарь не заменяет input, а расширяет его функциональность
  • значение всегда синхронизируется через внутреннее состояние Flatpickr-инстанса

Верхняя панель выбора месяца и года

Верхний блок календаря отвечает за навигацию между месяцами и годами.

Структура:

  • .flatpickr-months — контейнер всей панели
  • .flatpickr-month — текущий отображаемый месяц

Внутри .flatpickr-month располагаются элементы управления:

  • кнопки переключения месяцев
  • селекторы месяца и года (в зависимости от конфигурации monthSelectorType)

Классы элементов управления

  • .flatpickr-prev-month — кнопка перехода к предыдущему месяцу
  • .flatpickr-next-month — кнопка перехода к следующему месяцу
  • .cur-month — текущий выбранный месяц
  • .cur-year — текущий выбранный год

Эти элементы тесно связаны с методами API changeMonth() и changeYear(), которые обновляют состояние календаря без полной перерисовки DOM.

Сетка дней недели и заголовки

Под панелью навигации располагается блок дней недели:

  • .flatpickr-weekdays — контейнер строки заголовков
  • .flatpickr-weekday — отдельный день недели

Каждый .flatpickr-weekday генерируется на основе локали и настроек locale.firstDayOfWeek.

Особенности:

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

Основная сетка календаря (дни месяца)

Центральный блок интерфейса — это таблица дней:

  • .flatpickr-days — контейнер всей сетки
  • .dayContainer — отдельная колонка недели
  • .flatpickr-day — отдельный день

Каждый день представлен отдельным DOM-элементом, что обеспечивает высокую гибкость стилизации.

Базовые состояния .flatpickr-day

Flatpickr активно использует модификаторы состояния:

  • .today — текущая дата системы
  • .selected — выбранный день
  • .inRange — день входит в диапазон (range mode)
  • .startRange — начало диапазона
  • .endRange — конец диапазона
  • .disabled — недоступный для выбора день
  • .prevMonthDay — дни предыдущего месяца
  • .nextMonthDay — дни следующего месяца

Логика визуальных состояний

Комбинации классов позволяют формировать сложные сценарии:

  • диапазоны дат
  • множественный выбор
  • ограничения по min/max датам
  • исключённые дни недели

Пример поведения:

  • .selected.inRange может появляться в режиме range selection
  • .disabled.prevMonthDay обозначает недоступные “серые” дни вне текущего месяца

Классы режимов выбора

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

Режим одиночного выбора

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

Режим диапазона (range)

Добавляются классы:

  • .inRange
  • .startRange
  • .endRange

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

Режим множественного выбора

В этом режиме несколько элементов получают:

  • .selected на каждом выбранном дне

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

Классы состояния доступности

Flatpickr активно управляет доступностью дат через CSS-классы:

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

Эти классы могут зависеть от:

  • minDate / maxDate
  • disable и enable функций
  • пользовательских правил фильтрации дат

Служебные и технические классы

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

  • .flatpickr-wrapper — контейнер привязки к input
  • .flatpickr-input — целевой элемент ввода
  • .numInputWrapper — числовые поля (год, время)
  • .arrowUp / .arrowDown — элементы управления инкрементом значений

Эти элементы особенно важны при работе с временем (time picker) и расширенными конфигурациями.

Классы мобильного отображения

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

  • изменение позиционирования .flatpickr-calendar
  • упрощение DOM-структуры
  • переопределение взаимодействий (tap вместо hover)

Хотя отдельного стабильного класса мобильного режима нет, поведение определяется сочетанием:

  • viewport условий
  • конфигурации disableMobile

Взаимодействие классов и API Flatpickr

DOM-классы напрямую связаны с методами экземпляра:

  • changeMonth() → обновляет .flatpickr-month
  • changeYear() → обновляет .cur-year
  • setDate() → пересчитывает .selected
  • jumpToDate() → перестраивает .flatpickr-days
  • redraw() → полностью пересобирает DOM-календаря

Каждое изменение состояния через API отражается в классовой структуре без необходимости ручного вмешательства в DOM.

Принципы работы CSS-архитектуры Flatpickr

Модель классов построена на нескольких принципах:

  • минимальная динамика DOM — структура создаётся один раз и переиспользуется
  • состояния через классы — логика отделена от разметки
  • композиция модификаторов — один элемент может иметь несколько состояний одновременно
  • локальная изоляция стилей — все классы имеют префикс flatpickr-, исключая конфликты с внешними стилями
Оглавление