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