Календарная ячейка, соответствующая текущей дате, в Pikaday
выделяется через отдельное состояние, формируемое при отрисовке сетки
месяца. Внутри каждой ячейки используется кнопка с классом
pika-button, а дополнительные модификаторы состояния
накладываются динамически в зависимости от контекста: выбранная дата,
выходной день, недоступный диапазон и текущий день.
Для сегодняшнего дня применяется класс is-today, который
добавляется к элементу ячейки при совпадении даты с системным текущим
временем. Этот класс является основным точечным хукoм для стилизации,
поскольку он отделён от логики выбора (is-selected) и от
состояния доступности (is-disabled).
Структура DOM в упрощённом виде выглядит следующим образом:
<td data-day="2" class="is-today">
<button class="pika-button">2</button>
</td>Именно контейнер td получает состояние, а не сама
кнопка, что важно для корректного построения каскада CSS.
Стилизация сегодняшнего дня должна учитывать, что визуальный акцент
не должен конфликтовать с состоянием выбранной даты. Частая ошибка —
полное перекрытие стиля is-selected, из-за чего теряется
контекст взаимодействия.
Базовый подход заключается в добавлении мягкого визуального маркера:
.pika-single .is-today .pika-button {
position: relative;
font-weight: 600;
color: #1a73e8;
}Такое решение создаёт акцент на тексте, не вмешиваясь в геометрию ячейки и не ломая сетку календаря.
Для более явного выделения часто используется псевдоэлемент:
.pika-single .is-today .pika-button::after {
content: "";
position: absolute;
left: 50%;
bottom: 4px;
transform: translateX(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
background: #1a73e8;
}Это позволяет сохранить читаемость числа и одновременно добавить визуальный индикатор текущей даты.
При выборе текущей даты одновременно активируются два состояния:
is-today и is-selected. Без явного управления
приоритетами стили начинают конфликтовать, особенно если используется
заливка фона.
Корректная стратегия — явно задавать приоритет выбранного состояния:
.pika-single .is-selected .pika-button {
background: #1a73e8;
color: #ffffff;
border-radius: 4px;
}
.pika-single .is-selected.is-today .pika-button {
box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.3);
}В данном случае текущий день не перекрывает состояние выбора, а лишь дополняет его дополнительным контуром.
Если интерфейс содержит несколько уровней акцентов (выбранная дата, диапазон, ховер), сегодняшний день должен оставаться вторичным сигналом. Для этого используется минимальная контрастность и отсутствие тяжёлых заливок.
Корректная модель:
.pika-single .is-today .pika-button {
background: transparent;
border: 1px solid rgba(26, 115, 232, 0.4);
}Такой подход предотвращает визуальную конкуренцию с
is-selected, который обычно имеет сплошную заливку.
Pikaday использует фиксированный корневой класс
.pika-single, что позволяет безопасно ограничивать область
применения CSS. Это важно при интеграции в крупные проекты, где
глобальные стили могут случайно переопределить календарь.
Пример изолированного блока:
.pika-single {
font-family: system-ui, sans-serif;
border-radius: 6px;
overflow: hidden;
}Далее все состояния, включая is-today, наследуют эту
область видимости:
.pika-single .is-today .pika-button {
transition: all 0.15s ease-in-out;
}В тёмных темах текущий день требует более аккуратного контраста, поскольку синий спектр может сливаться с фоном.
.dark-theme .pika-single .is-today .pika-button {
color: #8ab4f8;
}
.dark-theme .pika-single .is-today .pika-button::after {
background: #8ab4f8;
}Здесь акцент переносится с яркости на различие оттенков, а не на интенсивность цвета.
Pikaday предоставляет хук onDraw, который позволяет
вмешиваться в процесс рендеринга после построения календарной сетки. Это
полезно, если требуется динамически усиливать или ослаблять визуальное
выделение сегодняшнего дня.
new Pikaday({
field: document.querySelector('#input'),
onDraw: function () {
const todayCell = this.el.querySelector('.is-today');
if (todayCell) {
todayCell.classList.add('today-highlighted');
}
}
});Дополнительный класс позволяет отделить стандартную логику библиотеки от кастомной стилизации:
.pika-single .today-highlighted .pika-button {
outline: 2px solid rgba(26, 115, 232, 0.25);
outline-offset: 2px;
}При наведении курсора стандартный hover может затмевать текущий день,
особенно если используется яркая подсветка. Чтобы сохранить идентичность
is-today, применяется комбинированное правило:
.pika-single .is-today .pika-button:hover {
background: rgba(26, 115, 232, 0.08);
}Это позволяет сохранить визуальную связь с текущей датой даже при активном взаимодействии.
При увеличении масштаба интерфейса или использовании крупных шрифтов визуальные маркеры текущего дня должны масштабироваться пропорционально.
.pika-single .is-today .pika-button::after {
width: 6px;
height: 6px;
}Также важно учитывать плотность сетки: в компактных режимах индикатор может быть перенесён в угол ячейки:
.pika-single .is-today .pika-button::after {
left: auto;
right: 4px;
bottom: 4px;
transform: none;
}При глубокой кастомизации Pikaday часто заменяются базовые стили
.pika-button, что приводит к потере видимости текущего дня.
В таких случаях необходимо явно восстанавливать состояние
is-today на уровне приоритета селекторов.
.pika-single td.is-today .pika-button {
border-color: inherit;
box-shadow: none;
}И отдельно возвращать акцент:
.pika-single td.is-today {
position: relative;
}Вместо добавления новых цветов часто эффективнее использовать прозрачность, чтобы не перегружать интерфейс:
.pika-single .is-today .pika-button {
background: rgba(26, 115, 232, 0.06);
color: inherit;
}Такой подход позволяет сегодняшнему дню оставаться частью общей визуальной системы, не превращаясь в отдельный доминирующий элемент.