Components
<DateTime>
<DateTime>コンポーネントのAPIリファレンス
概要
<DateTime>
コンポーネントは、フォーマットされた日付や時刻の文字列を表示し、フォーマットオプションやロケールなどのカスタマイズに対応しています。
日付や時刻は、現在のロケールおよび指定されたオプションのパラメータに従ってフォーマットされます。
<DateTime>{1738010355}</DateTime>
// Output: 1/27/2025
すべてのフォーマット処理は、Intl.DateTimeFormat
ライブラリを使用してローカルで行われます。
リファレンス
Props
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 | フォーマットに使用するロケール(省略可能)。指定しない場合はユーザーのロケールが使用されます。ロケールの指定方法についてはこちらをご覧ください。 |
戻り値
フォーマットされた日付や時刻を文字列として含む 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">
The time of the event is <DateTime> {event.date} </DateTime>. // [!code highlight]
</T>
);
}
カスタムフォーマット
<DateTime>
コンポーネントは、カスタムフォーマットオプションをサポートしています。
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>
などの他の変数コンポーネントの詳細や使用例については、変数コンポーネントの使い方 ドキュメントをご覧ください。
このガイドはいかがですか?