Date

Date — дата в интерфейсе: форматирует значение паттерном date-fns с русской локалью либо показывает относительное время («через 3 дня») с тултипом на точную дату. Рендерится тегом time с машинным dateTime. Компонент ничего не знает про смысл даты — цвет и иконку задаёт потребитель через getAppearance.

Использует: Tooltip

Анатомия

Date
Icon
Значение

Примеры

value

Сама дата. Принимает объект Date, ISO-строку (в таком виде дата приходит из API) или timestamp — приведение компонент берёт на себя.

format

Паттерн date-fns; локаль всегда русская, так что название месяца и дня недели переводить не нужно. По умолчанию — "d MMMM yyyy".

Относительное времяformat

Значение "relative" вместо паттерна: дата показывается относительно текущего момента и обрастает тултипом с точной датой и временем.

Дедлайн

getAppearance вызывается с датой и текущим моментом и возвращает вариант цвета и иконку — так дата становится дедлайном: меньше двух часов — danger, меньше суток — warning, дальше — обычный приглушённый текст. Правило живёт у потребителя, компонент только рисует.

API

PropTypeDefault
value*

Дата: объект Date, ISO-строка или timestamp

globalThis.Date | string | number-
format

Паттерн date-fns ("d MMMM yyyy" по умолчанию) либо "relative" — относительная дата («через 3 дня») с тултипом на полную дату

string | "relative""d MMMM yyyy"
getAppearance

Правила отображения: цвет и иконка в зависимости от даты. Вызывается с датой и текущим моментом, например «до дедлайна меньше двух часов — danger с иконкой». Без него — приглушённый текст без иконки

( value: globalThis.Date, now: globalThis.Date, ) => { variant?: Variant; icon?: Icon } | undefined-