Components
DateTime
<DateTime> コンポーネントのAPIリファレンス
概要
<DateTime> コンポーネントは、日付または時刻を整形済みの文字列としてレンダリングし、フォーマット用の options や locale などのカスタマイズに対応します。
日付／時刻は、現在の locale と、指定された任意のパラメーターに従ってフォーマットされます。
<DateTime>{1738010355}</DateTime>
// 出力: 2025/01/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-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>コンポーネントは、日付や時刻の値を整形するために使える変数コンポーネントです。- このコンポーネントは、整形に
Intl.DateTimeFormatライブラリを使用します。
次のステップ
<DateTime>コンポーネントや、<Currency>、<Num>、<Var>といった他の変数コンポーネントの詳細や使用例については、
このガイドはどうでしたか？