F1 component kit/Utilities/Date-time display and date rangePhone

Date-time display and date range

F1 variantMissing · new04 · datetime

The API returns UTC; the browser formats in the staff member's zone (T001 Q25). Relative up to 7 days, then absolute; the tooltip shows the staff zone, UTC and ISO. The F1 DateRange takes day boundaries in the staff zone and sends UTC, with Today / 7 days / 30 days presets and a month / year mode for the gantt grid.

Covers: M08, date designer. Exports: DateTime, DateRange.

Whole page:CompactComfortableLaravel · navyDTC · midnight green
AnatomyStatesDensityEN · 中文Edge casesContract

Anatomy

The component as it sits in the product: English, compact, real data shapes.

Status changedCreatedPaidIn production since
Times in Asia/Shanghai · relative ≤ 7 days, then absolute

States

7 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.

default · relative ≤ 7 d
Status changedCreatedPaidIn production since
Times in Asia/Shanghai · relative ≤ 7 days, then absolute
hover / tap · UTC + ISO
Your zone18 Oct 2026 14:20 · UTC+8UTC18 Oct 2026 06:20ISO2026-10-18T06:20:00Z
own zone ≠ yours
Pickup cutoff· yours 00:00 +1dWhen a field carries its own zone and it differs from yours, show both.
range + presets
Created 12 – 18 Oct 2026Day boundaries in Asia/Shanghai, sent as UTC: from=2026-10-11T16:00:00Z to=2026-10-18T15:59:59Z
month / year (gantt)
2026month=10&year=2026 · admin.orders.gantt-grid
null
Paid—null from the API: an em dash, never “Invalid date”.
loading

Density

Compact (2b ultra, the default) and comfortable, side by side. Same markup, only the density tokens change.

compact · default · data-density=compact
Status changedCreatedPaidIn production since
Times in Asia/Shanghai · relative ≤ 7 days, then absolute
comfortable · data-density=comfortable
Status changedCreatedPaidIn production since
Times in Asia/Shanghai · relative ≤ 7 days, then absolute

English · 中文

Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.

en
Status changedCreatedPaidIn production since
Times in Asia/Shanghai · relative ≤ 7 days, then absolute
中文 · lang=zh-Hans
状态变更创建付款开始生产
时区 Asia/Shanghai · 7 天内相对，之后绝对时间

Long string · permission denied

The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).

long string
Status changedCreatedPaidIn production since
Times in America/Argentina/ComodRivadavia · relative ≤ 7 days, then absolute
permission denied
PaidA field the API withholds for this role renders as a lock, not as empty.

Both apps

One @rj/admin-kit component, two themes: the Laravel admin (navy pinned) and the DTC admin (kit v4 Midnight green), by token swap only.

Laravel admin · :root
Status changedCreatedPaidIn production since
Times in Asia/Shanghai · relative ≤ 7 days, then absolute
DTC admin · data-theme=dtc
Status changedCreatedPaidIn production since
Times in Asia/Shanghai · relative ≤ 7 days, then absolute

Contract

The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.

Export
DateTime · @rj/admin-kit
Props
value ISO UTC · mode auto|relative|absolute · zone (default: me.timezone) · ownZone
States
relative · absolute · dual-zone · null · withheld · loading
shadcn / Radix
Tooltip
Package underneath
date-fns + @date-fns/tz (TZDate)
Accessibility
<time datetime>; tooltip on focus too
Phone variant
tap flips relative ↔ exact
Export
DateRange · @rj/admin-kit
Props
from/to · presets · mode day|month
Variants
range + presets · month / year
shadcn / Radix
Popover + Calendar
Package underneath
react-day-picker · @date-fns/tz
API operations
from / to on admin.replays.index · month / year on admin.orders.gantt-grid