Components
DateTime
<DateTime> コンポーネントの APIリファレンス
概要
<DateTime> コンポーネントは、フォーマット済みの日付または時刻の文字列を表示し、formatting options や locale などによるカスタマイズに対応します。
日付や時刻は、現在の locale と、渡された任意のパラメーターに基づいてフォーマットされます。
<DateTime>{1738010355}</DateTime>
// 出力: 1/27/2025すべてのフォーマット処理は、Intl.DateTimeFormat ライブラリを用いてローカルで行われます。
参考
Props
Prop
Type
説明
| Prop 名称 | 説明 |
|---|---|
children | コンポーネント内にレンダリングする内容。通常は日付または時刻の値。指定されている場合は value より優先されます。 |
value | 日付または時刻の既定値。文字列、数値（タイムスタンプ）、または Date オブジェクトを指定できます。 |
options | 日付や時刻の書式設定に使う任意の options。Intl.DateTimeFormatOptions の仕様に準拠します。曜日名やタイムゾーンなどのスタイルを指定するために使用します。 |
locales | 書式設定に用いるロケールを指定するための任意の対応ロケール。未指定の場合はユーザーのロケールが使用されます。ロケールの指定についてはこちらを参照してください。 |
返り値
フォーマット済みの日付または時刻の文字列を含む JSX.Element。
例
基本的な使い方
<DateTime> コンポーネントは、ローカライズされた日付または時刻の値を表示するために使用できます。
import { DateTime } from 'gt-react';
export default function EventDate(event) {
return (
<DateTime>{event.date}</DateTime>
);
}対応ロケールの指定
<DateTime> コンポーネントは、特定の対応ロケールで日付や時刻の値を表示できます。
import { DateTime } from 'gt-react';
export default function EventDate(event) {
return (
<DateTime locales={['fr-FR']}> {event.date} </DateTime>.
);
}<DateTime> を翻訳する
翻訳対象の文中に日時を表示したい場合は、<DateTime> コンポーネントを <T> コンポーネントで包みます。
import { T, DateTime } from 'gt-react';
export default function EventDate(event) {
return (
<T id="eventDate">
イベントの日時は<DateTime> {event.date} </DateTime>です。 // [!code highlight]
</T>
);
}カスタム書式設定
<DateTime> コンポーネントはカスタムの options に対応しています。
import { DateTime } from 'gt-react';
export default function EventDate(event) {
return (
<DateTime options={{
dateStyle: 'full', // [!code ハイライト]
timeStyle: 'long', // [!code ハイライト]
timeZone: 'Australia/Sydney',
}}>
{event.date}
</DateTime>.
);
}注意事項
<DateTime>コンポーネントは、日付や時刻の値を整形するために使用できる Variable コンポーネントです。- このコンポーネントは、整形に
Intl.DateTimeFormatライブラリを使用します。
次のステップ
<DateTime>コンポーネントや<Currency>、<Num>、<Var>などの変数コンポーネントの詳細や使用例については、
このガイドはいかがですか?