Components
DateTime
<DateTime> コンポーネントのAPIリファレンス
概要
<DateTime> コンポーネントは、options や locale などの書式設定を含むカスタマイズに対応し、フォーマット済みの日付または時刻の文字列をレンダリングします。
日付や時刻は、現在の locale と、指定された任意のパラメーターに従ってフォーマットされます。
<DateTime>{1738010355}</DateTime>
// 出力: 2025/1/27すべての書式設定は、Intl.DateTimeFormat ライブラリによってローカルで処理されます。
リファレンス
Props
Prop
Type
説明
| Prop 名 | 説明 |
|---|---|
children | コンポーネント内に描画する内容。通常は日付または時刻の値。指定がある場合は value prop より優先されます。 |
value | 日付または時刻の既定値。文字列、数値（タイムスタンプ）、または Date オブジェクトを指定できます。 |
options | 日付・時刻のための任意の書式設定 options。Intl.DateTimeFormatOptions の仕様に従います。曜日名やタイムゾーンなどのスタイルを定義する際に使用します。 |
locales | 書式設定に使用するロケールを指定する任意の対応ロケール。未指定の場合はユーザーの locale が使用されます。ロケールの指定についてはこちらを参照してください。 |
戻り値
フォーマット済みの日付または時刻の文字列を含む JSX.Element。
例
基本的な使い方
<DateTime> コンポーネントは、ローカライズされた日付や時刻の値を表示するために利用できます。
import { DateTime } from 'gt-react';
export default function EventDate(event) {
return (
<DateTime>{event.date}</DateTime>
);
}対応ロケールの指定
<DateTime> コンポーネントを使うと、指定した locale に合わせて日付や時刻を表示できます。
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',
timeStyle: 'long',
timeZone: 'Australia/Sydney',
}}>
{event.date}
</DateTime>.
);
}注意事項
<DateTime>コンポーネントは、日付や時刻の値を整形するために使える変数コンポーネントです。- このコンポーネントは、整形に
Intl.DateTimeFormatライブラリを使用します。
次のステップ
<DateTime>コンポーネントや<Currency>、<Num>、<Var>といった他の Variable コンポーネントの詳細や使用例については、
このガイドはどうでしたか？