GrRelativeTime

Примеры 3 у каждого — живое демо и его код

• Активность рабочего пространства

  Свежесть важнее точности: «2 минуты назад» читается быстрее метки времени, а точный момент остаётся в title и в <time datetime> — для наведения и диктора. value-adapter="isoDateTime" берёт строки API как есть, numeric="auto" говорит «вчера», а base закрепляет «сейчас» для этой застывшей страницы — и сервер с браузером совпадают.

  Workspace activity

  • MOMina Ortiz approved invoice INV-04182 минуты назад
  • DKDaniel Kim added 3 seats to the Team plan2 часа назад
  • BABilling API retried the card of Contoso Ltd10 часов назад
  • ATAiko Tanaka changed the dunning schedule4 дня назад
  • MOMina Ortiz invited Ben Hartley as an accountant3 недели назад
  Код и пропы

• Когда платить по счетам

  Срок оплаты близок к договору: «через 5 дней» годится, а «3 недели назад» не отвечает на вопрос «какого числа». cutoff с 14 дней переключает на абсолютную дату, оформленную опциями format, а не строкой-шаблоном. value-adapter="isoDate" помечает значение как день, и оно считается календарными днями — в 9 утра завтрашняя дата читается «завтра», а не «через 15 часов». Слот по умолчанию получает текст, и просроченные строки говорят об этом красным.

  Contoso Ltd · open invoicesNet 14 · reminders go out on the due date

  • INV-0431€1,284.50Due через 5 дней
  • INV-0427€432.00Due завтра
  • INV-0418€3,210.00Due 3 дня назадOverdue
  • INV-0402€96.00Due 12 сент. 2026 г.Overdue
  Код и пропы

• Метка, которая остаётся верной

  Последний импорт — настоящий момент этой сессии, поэтому live держит метку верной без чьего-либо участия: «сейчас» становится «1 минуту назад» на общем таймере, который тикает раз в 5 секунд, пока важны секунды, раз в час для месяцев и останавливается на скрытой вкладке. width="short" укладывается в строку статуса.

  Deutsche Bank · business accountTransactions are matched to invoices on import

  Last import40 сек. назадImport now
  Код и пропы

API порождается из пакета · разойтись не может

import type { GrRelativeTimeConfigurableProps, GrRelativeTimeProps } from '@feugene/granularity-chrono/components/GrRelativeTime'

const grRelativeTimeConfig: import("@feugene/granum/contract").GranumComponentDescriptor<"GrRelativeTime">;

interface GrRelativeTimeConfigurableProps {
    width: NameWidth;
    numeric: Intl.RelativeTimeFormatNumeric;
    cutoff: number;
    live: boolean;
}

const grRelativeTimeSafelist: string[];

interface GrRelativeTimeProps<T = Date> {
    /** Момент, о котором речь. Пустое значение рисует пустую метку. */
    value?: T | null;
    /** Как значение приходит от потребителя. Тот же контракт, что у пикеров. */
    valueAdapter?: GrChronoAdapterName | GrChronoAdapter<T>;
    /**
     * С чем сравнивать вместо «сейчас».
     *
     * Задан — часы не читаются вовсе: ни таймера, ни расхождения серверного
     * рендера с клиентским. Это же делает воспроизводимыми тесты и снимки.
     */
    base?: Date;
    /**
     * Обновляться живьём. Такт компонент выбирает сам по текущей единице:
     * «3 месяца назад» незачем пересчитывать каждую секунду.
     */
    live?: boolean;
    /**
     * Начиная со скольких дней показывать обычную дату вместо относительной.
     * `0` — никогда: «347 дней назад» останется как есть.
     */
    cutoff?: number;
    /** Вид абсолютной даты — опциями `Intl`, а не строкой-паттерном. */
    format?: Intl.DateTimeFormatOptions;
    /** Длина относительной строки: «3 месяца назад» против «3 мес. назад». */
    width?: NameWidth;
    /** `'auto'` даёт «вчера», `'always'` — «1 день назад». */
    numeric?: Intl.RelativeTimeFormatNumeric;
    /** Локаль показа. Не задана — из адаптера i18n приложения. */
    locale?: string;
}

Связанные четвёртый вопрос: когда не это

• GrDatePickerДата и время

  Выбрать дату, а не показать

• GrDateTimePickerДата и время

  Выбрать момент со временем

• GrTimelineДанные

  Показать последовательность событий

• GrDurationДата и времяссылается сюда

  Берут, когда сколько заняло.