XTimeDiff — Time Difference

Pass in a target time; the component computes the difference from the current time and updates every second. Past times show "elapsed Xy Xm Xd", future times show "remaining Xy Xm Xd".

Live Demo

已过2年3月16日，07时17分09秒

剩余3月7日，08时12分51秒

剩余8月20日，17时12分51秒

<XTimeDiff time="2024-06-01 08:30:00" />
<XTimeDiff time="2026-12-25 00:00:00" variant="card" />
<XTimeDiff time="2027-06-07 09:00:00" variant="pill" color="#409eff" size="lg" />

Props

Prop	Type	Default	Description
time	string	— (required)	Target time, format YYYY-MM-DD or YYYY-MM-DD HH:mm:ss
prefix	string	'elapsed' / 'remaining'	Custom prefix text, overriding the default judgment
suffix	string	''	Custom suffix text
variant	string	'segment'	Visual style: segment/plain/outline/card/pill
size	string	'md'	Size tier: sm/md/lg
color	string	''	Accent color; uses a neutral ink color when omitted, independent of the brand theme
fontSize	string	''	Font size, e.g. '24px', '1.2em' (precisely overrides size)

Variant Reference

variant	Visual特征	Use case
segment	Each "number + unit" wrapped in a soft pill	General display (default)
plain	Unadorned inline text	Inline within body text, space-saving
outline	Outlined segments, airy and light	Light backgrounds, understated
card	Whole-card container with its own shadow	As a standalone highlighted info block
pill	Solid high-emphasis, auto-contrast text	Key countdown, center-stage display

Usage Notes

• time only supports YYYY-MM-DD or YYYY-MM-DD HH:mm:ss; when the time-of-day is absent, "XXh XXm XXs" is hidden.
• Updates every second via setInterval — extremely low performance cost.
• After the countdown reaches the target time, it automatically switches to "elapsed" mode.