<DateTime>

概述

<DateTime> 组件会渲染一个格式化的日期或时间字符串，支持如格式选项和本地化等自定义功能。日期或时间会根据当前的本地化设置以及传入的可选参数进行格式化。

<DateTime>{1738010355}</DateTime>
// Output: 1/27/2025

所有格式化操作都在本地通过 Intl.DateTimeFormat 库完成。

参考

属性

Prop	Type	Default
`locales??`	`string[]`	`undefined`
`options??`	`Intl.DateTimeFormatOptions`	`{}`
`value??`	`string \| number \| Date`	`undefined`
`name??`	`string`	`undefined`
`children??`	`any`	`undefined`

描述

属性名	描述
`children`	组件内部要渲染的内容。通常为日期或时间值。如果提供该属性，将优先于 `value` 属性。
`value`	日期或时间的默认值。可以是字符串、数字（时间戳）或 Date 对象。
`options`	可选的日期或时间格式化选项，遵循 `Intl.DateTimeFormatOptions` 规范。可用于定义如星期名称、时区等样式。
`locales`	可选的本地化设置，用于指定格式化所用的语言环境。如果未提供，则使用用户的语言环境。关于如何指定 locales 的更多信息请参见此处。

返回值

包含格式化日期或时间字符串的 JSX.Element。

示例

基本用法

<DateTime> 组件可用于显示本地化的日期或时间值。

EventDate.jsx

import { DateTime } from 'gt-react';

export default function EventDate(event) {
    return (
        <DateTime> {event.date} </DateTime>. 
    );
}

指定语言环境

<DateTime> 组件可用于在特定语言环境下显示日期或时间值。

EventDate.jsx


import { DateTime } from 'gt-react';

export default function EventDate(event) {
    return (
        <DateTime locales={['fr-FR']}> {event.date} </DateTime>. 
    );
}

翻译 `<DateTime>`

假设你希望日期时间显示在一句也被翻译的句子中。你可以将 <DateTime> 组件包裹在 <T> 组件中。

EventDate.jsx

import { T, DateTime } from 'gt-react';

export default function EventDate(event) {
    return (
        <T id="eventDate">
            The time of the event is <DateTime> {event.date} </DateTime>. // [!code highlight]
        </T>
    );
}

自定义格式化

<DateTime> 组件支持自定义格式化选项。

EventDate.jsx

import { DateTime } from 'gt-react';

export default function EventDate(event) {
    return (
        <DateTime options={{
            dateStyle: 'full', 
            timeStyle: 'long', 
            timeZone: 'Australia/Sydney', 
        }}>
            {event.date}
        </DateTime>.
    );
}

注意事项

<DateTime> 组件是一个可变组件，可用于格式化日期和时间值。
该组件使用 Intl.DateTimeFormat 库进行格式化。

后续步骤

有关 <DateTime> 组件以及其他变量组件如 <Currency>、<Num> 和 <Var> 的更多详细信息和使用示例，请参阅使用变量组件文档。

<DateTime>

在本页面