Стилизация диапазонов

Механизм выделения диапазонов дат в Flatpickr основан на комбинации встроенных CSS-классов и логики плагина режима mode: "range". При активации диапазонного выбора библиотека автоматически помечает элементы календарной сетки специальными состояниями, которые затем могут быть переопределены через стилизацию.

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

Базовые состояния диапазона

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

  • selected — дата входит в выбранный диапазон
  • startRange — первая дата диапазона
  • endRange — последняя дата диапазона
  • inRange — промежуточные даты между началом и концом
  • rangeHover — визуализация предварительного диапазона при наведении

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

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

Визуальная логика диапазона

Flatpickr разделяет диапазон на несколько слоёв визуального представления. Это важно учитывать при стилизации, так как перекрытие классов влияет на итоговый результат.

Приоритет состояний:

  1. startRange / endRange
  2. inRange
  3. selected
  4. rangeHover

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

Стилизация базового выделения диапазона

Стандартное выделение можно полностью переопределить через CSS. Основная задача — задать фон, форму и границы диапазона.

.flatpickr-day.selected {
  background: #e0e7ff;
  border-color: transparent;
  color: #1e1b4b;
}

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

Стили для начала и конца диапазона

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

.flatpickr-day.startRange {
  background: #4f46e5;
  color: #ffffff;
  border-radius: 50% 0 0 50%;
}

.flatpickr-day.endRange {
  background: #4f46e5;
  color: #ffffff;
  border-radius: 0 50% 50% 0;
}

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

Стилизация промежуточных дат

Промежуточные даты формируют “полосу” между началом и концом диапазона. Их стилизация обычно отличается более мягким фоном.

.flatpickr-day.inRange {
  background: #c7d2fe;
  color: #1f2937;
  border-radius: 0;
}

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

Управление hover-диапазоном

При выборе конечной даты Flatpickr показывает предварительный диапазон при наведении. Он использует класс rangeHover.

.flatpickr-day.rangeHover {
  background: rgba(79, 70, 229, 0.2);
  border-color: transparent;
}

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

Объединение скруглений в единый визуальный блок

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

.flatpickr-day.inRange {
  border-radius: 0;
}

.flatpickr-day.startRange {
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
}

.flatpickr-day.endRange {
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}

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

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

Flatpickr может помечать недоступные даты через disabled. В контексте диапазона их стилизация должна предотвращать визуальное слияние с активными датами.

.flatpickr-day.disabled {
  background: transparent;
  color: #9ca3af;
  cursor: not-allowed;
}

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

Интеграция с темной темой

Стили диапазона часто требуют адаптации под тёмный интерфейс. В этом случае основная задача — корректная работа контраста и прозрачностей.

.dark .flatpickr-day.selected {
  background: #4338ca;
  color: #f9fafb;
}

.dark .flatpickr-day.inRange {
  background: rgba(99, 102, 241, 0.25);
}

Использование прозрачных слоёв позволяет сохранить читаемость без агрессивных цветов.

Использование CSS-переменных для диапазонов

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

:root {
  --range-bg: #c7d2fe;
  --range-active: #4f46e5;
  --range-text: #111827;
}

.flatpickr-day.selected {
  background: var(--range-active);
  color: white;
}

.flatpickr-day.inRange {
  background: var(--range-bg);
  color: var(--range-text);
}

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

Конфликты с кастомными темами

При использовании кастомных тем Flatpickr возможны конфликты специфичности. Наиболее частая проблема — перекрытие стилей .flatpickr-day глобальными селекторами.

Для стабилизации поведения диапазонов применяется повышение специфичности:

.flatpickr-calendar .flatpickr-day.inRange {
  background: #c7d2fe;
}

Также важно избегать !important без необходимости, так как это усложняет дальнейшую кастомизацию.

Анимация переходов диапазона

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

.flatpickr-day {
  transition: background 0.15s ease, color 0.15s ease;
}

Для hover-состояний допустимо добавление более мягких переходов, но без влияния на layout.

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

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

Рекомендуется уменьшать насыщенность inRange, чтобы избежать “заливки” всей сетки:

@media (max-width: 600px) {
  .flatpickr-day.inRange {
    background: rgba(199, 210, 254, 0.6);
  }
}

Кастомные маркеры диапазона

Дополнительная стилизация может включать псевдоэлементы для усиления визуального разделения начала и конца диапазона.

.flatpickr-day.startRange::after,
.flatpickr-day.endRange::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: #ffffff;
  border-radius: 50%;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
}

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

Согласованность с другими режимами

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

Для предотвращения визуальных конфликтов диапазонные стили часто изолируются:

.flatpickr-calendar.rangeMode .flatpickr-day.selected {
  background: transparent;
}

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

Оглавление