Структура CSS классов

Визуальная часть календаря в Pikaday строится вокруг набора предопределённых CSS-классов, которые формируют структуру DOM и служат точками расширения для кастомизации. Каждый элемент интерфейса получает стабильный класс, не зависящий от конфигурации экземпляра, что делает стилизацию предсказуемой и изолированной от логики JavaScript.

Корневой контейнер календаря обычно получает класс:

  • pika-single — основной контейнер календаря

Он создаётся как абсолютный блок, который позиционируется относительно привязанного input-элемента. В зависимости от состояния дополнительно применяются модификаторы:

  • is-hidden — календарь скрыт
  • is-bound — календарь привязан к input и управляется через событие фокуса/клика

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

Иерархия DOM-структуры календаря

Внутри pika-single формируется несколько логических блоков:

pika-single
 ├── pika-lendar
 │    ├── pika-title
 │    ├── pika-table
 │    └── pika-week (опционально)

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

Заголовок календаря и навигация

Блок заголовка календаря:

  • pika-title — контейнер шапки календаря

Внутри него находятся элементы управления месяцем и годом:

  • pika-label — отображение текущего месяца и года
  • pika-prev — кнопка перехода к предыдущему периоду
  • pika-next — кнопка перехода к следующему периоду

Эти элементы являются интерактивными и управляют состоянием календаря без необходимости внешнего вмешательства. Кнопки навигации часто стилизуются через псевдоклассы :hover, :active и :disabled (или через внутренние классы состояния, если они добавлены кастомной логикой).

Особенность заключается в том, что pika-label часто разбивается на две части (месяц и год), которые могут быть переопределены через кастомные render-функции, но CSS-класс остаётся тем же, что позволяет сохранять совместимость стилей.

Таблица дней и сетка календаря

Основная часть интерфейса — это таблица:

  • pika-table — таблица календарной сетки

Внутри неё формируется стандартная HTML-таблица с ячейками дней. Каждая ячейка содержит кнопку:

  • pika-button — интерактивная кнопка дня

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

  • is-today — текущая дата
  • is-selected — выбранная дата
  • is-disabled — недоступная для выбора дата
  • is-inrange — дата входит в диапазон выбора
  • is-startrange — начало диапазона
  • is-endrange — конец диапазона

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

Вспомогательные элементы сетки

Дополнительные элементы календарной таблицы:

  • pika-week — отображение номера недели (если включено)

Этот элемент используется при необходимости отображать ISO-нумерацию недель. Он не активен по умолчанию и зависит от конфигурации.

Модификаторы состояния календаря

Состояния календаря контролируются не только через внутреннюю логику, но и через CSS-модификаторы:

  • is-hidden

    • Полностью скрывает календарь через display: none или visibility

  • is-bound

    • Указывает, что календарь привязан к input и управляется автоматически

  • is-rtl (если используется локализация)

    • Переключает направление интерфейса на RTL

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

Система стилизации через каскад

CSS-архитектура Pikaday предполагает каскадное переопределение. Базовые стили библиотеки задают минимальную визуальную структуру, тогда как пользовательские стили обычно накладываются поверх.

Типичный приём переопределения:

  • использование селекторов вида .pika-single .pika-button

  • уточнение состояния через комбинации классов:

    • .pika-button.is-selected
    • .pika-button.is-today
    • .pika-button.is-disabled

Приоритет состояния определяется специфичностью селектора, а не порядком DOM-элементов.

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

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

  • при наведении добавляются временные состояния (через :hover)
  • при выборе даты переключается is-selected
  • при изменении диапазона пересчитываются is-inrange, is-startrange, is-endrange

Эти изменения происходят полностью на стороне JavaScript-библиотеки и не требуют внешнего обновления DOM.

Практика расширения и переопределения

При работе со стилями Pikaday важна стабильность селекторов. Рекомендуется избегать привязки к структуре вложенности без классов состояния, поскольку DOM может меняться между версиями.

Наиболее устойчивые точки расширения:

  • .pika-single
  • .pika-button
  • .is-selected
  • .is-disabled
  • .pika-title

Комбинация этих классов позволяет реализовать полностью кастомные темы, включая тёмные режимы, компактные версии и адаптивные сетки без модификации JavaScript-кода.

Конфликты и изоляция стилей

При интеграции Pikaday в крупные проекты часто возникает проблема конфликтов CSS. Основной риск связан с глобальными селекторами вроде button или table.

Решение строится вокруг пространственной изоляции:

  • все стили ограничиваются контейнером .pika-single
  • переопределение глобальных тегов не используется
  • состояния управляются только через классы библиотеки

Такой подход позволяет встроить календарь в любые дизайн-системы без деградации внешнего вида.

Поведение классов при кастомизации

При изменении шаблонов рендера (если используется кастомный rendering слой) классы Pikaday остаются ключевым механизмом синхронизации состояния. Даже при замене структуры HTML логика библиотеки продолжает ориентироваться на стандартные имена классов, что делает их контрактом между UI и логикой выбора дат.

Оглавление