<DateTime>

概述

<DateTime> 组件渲染格式化的日期或时间字符串，支持格式选项和区域设置等自定义。日期或时间根据当前区域设置和传递的任何可选参数进行格式化。

<DateTime>{1738010355}</DateTime>
// 输出: 1/27/2025

所有格式化均使用 Intl.DateTimeFormat 库在本地处理。

参考

属性

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

描述

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

返回值

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

示例

基本用法

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

EventDate.jsx

import { DateTime } from 'gt-next';
 
export default function EventDate(event) {
    return (
        <DateTime> {event.date} </DateTime>. 
    );
}

指定语言环境

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

EventDate.jsx

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

翻译 `<DateTime>`

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

EventDate.jsx

import { T, DateTime } from 'gt-next';
 
export default function EventDate(event) {
    return (
        <T id="eventDate">
            活动的时间是 <DateTime> {event.date} </DateTime>. // [!code highlight]
        </T>
    );
}

自定义格式

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

EventDate.jsx

import { DateTime } from 'gt-next';
 
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>

在本页面