为 React 构建的界面语言。v1.7.5 已发布
UI
开始设计规范组件变更记录
GitHub 仓库9

Time 时间

按当前语言显示时间，可显示为相对时间。

源码

发布于

最后编辑 

import { Stack, Text, Time } from '@hina-ui/react'

export default function Demo() {
  const published = new Date('2026-03-14T09:30:00+08:00')
  const edited = new Date(Date.now() - 12 * 60 * 1000)

  return (
    <Stack className="max-w-sm">
      <Text>
        发布于 <Time value={published} />
      </Text>
      <Text tone="muted">
        最后编辑 <Time value={edited} format="relative" />
      </Text>
    </Stack>
  )
}
tsx

用法

import { Time } from '@hina-ui/react'
ts

value 接受时间字符串、时间戳或者 Date。组件渲染为原生的 time，datetime 属性写入 ISO 格式，显示文本按当前语言排版。

import { Time } from '@hina-ui/react'

export default function Demo() {
  return <Time value="2026-03-14T09:30:00+08:00" />
}
tsx

示例

格式

共四档。datetime 同时显示日期与时刻，date 与 time 各取其一，relative 显示相对现在的时间。

datetime
date
time
relative
import { DescriptionDetails, DescriptionList, DescriptionTerm, Time } from '@hina-ui/react'

const value = '2026-03-14T09:30:00+08:00'

export default function Demo() {
  return (
    <DescriptionList className="grid max-w-sm grid-cols-[6rem_1fr] gap-y-2 [&>dd]:m-0! [&>dt]:m-0!">
      <DescriptionTerm>datetime</DescriptionTerm>
      <DescriptionDetails>
        <Time value={value} />
      </DescriptionDetails>
      <DescriptionTerm>date</DescriptionTerm>
      <DescriptionDetails>
        <Time value={value} format="date" />
      </DescriptionDetails>
      <DescriptionTerm>time</DescriptionTerm>
      <DescriptionDetails>
        <Time value={value} format="time" />
      </DescriptionDetails>
      <DescriptionTerm>relative</DescriptionTerm>
      <DescriptionDetails>
        <Time value={value} format="relative" />
      </DescriptionDetails>
    </DescriptionList>
  )
}
tsx

相对时间

45 秒以内显示为“刚刚”，更早或更晚按秒、分、时、天、周、月、年逐级换算。措辞取当前语言的自然说法，例如两天之后显示为“后天”。

页面打开期间每 30 秒刷新一次，无需手动更新。指针悬停可以看到完整的日期与时刻。

10 秒前：

3 分钟前：

5 小时前：

2 天后： 

import { Stack, Text, Time } from '@hina-ui/react'

export default function Demo() {
  const now = Date.now()
  const items = [
    { label: '10 秒前', value: now - 10 * 1000 },
    { label: '3 分钟前', value: now - 3 * 60 * 1000 },
    { label: '5 小时前', value: now - 5 * 60 * 60 * 1000 },
    { label: '2 天后', value: now + 2 * 24 * 60 * 60 * 1000 },
  ]

  return (
    <Stack className="max-w-sm" gap="xs">
      {items.map(item => (
        <Text key={item.label} size="sm">
          {item.label}： <Time value={item.value} format="relative" />
        </Text>
      ))}
    </Stack>
  )
}
tsx

随语言变化

日期的顺序、月份的写法与相对时间的措辞都跟随 UiLocaleProvider 提供的语言。

简体中文：

English： 

'use client'

import { createElement, type ReactNode } from 'react'
import { Stack, Text, Time, UiLocaleProvider, enUS } from '@hina-ui/react'

const value = '2026-03-14T09:30:00+08:00'

function English({ children }: { children?: ReactNode }) {
  return createElement(
    'span',
    null,
    <UiLocaleProvider messages={enUS}>{children}</UiLocaleProvider>,
  )
}

export default function Demo() {
  return (
    <Stack className="max-w-sm">
      <Text>
        简体中文： <Time value={value} />
      </Text>
      <Text>
        English：{' '}
        <English>
          <Time value={value} />
        </English>
      </Text>
    </Stack>
  )
}
tsx

无法解析的值

value 为空或者无法解析时显示“未知时间”，并且改为渲染 span，不会输出错误的 datetime。开发环境下会输出告警。

值为 null： 未知时间

无法解析： 未知时间

import { Stack, Text, Time } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="max-w-sm">
      <Text>
        值为 null： <Time value={null} />
      </Text>
      <Text>
        无法解析： <Time value="昨天下午" />
      </Text>
    </Stack>
  )
}
tsx

无障碍

  • datetime 属性始终是完整的 ISO 时间，辅助技术据此获得准确时刻。
  • 相对时间会随时间变化，完整时刻保留在 title 中。

API

Props

属性
类型
默认值
说明
value
string | number | Date | null
—
要显示的时间
format
'datetime' | 'date' | 'time' | 'relative'
'datetime'
显示格式
className
string
—
追加至根元素的类名