<DateTime>

概要

<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>コンポーネントは、ローカライズされた日付や時刻の値を表示するために使用できます。

EventDate.jsx

import { DateTime } from 'gt-next';

export default function EventDate(event) {
    return (
        <DateTime> {event.date} </DateTime>. 
    );
}

ロケールの指定

<DateTime>コンポーネントは、特定のロケールで日付や時刻の値を表示するために使用できます。

EventDate.jsx


import { DateTime } from 'gt-next';

export default function EventDate(event) {
    return (
        <DateTime locales={['fr-FR']}> {event.date} </DateTime>. 
    );
}

`<DateTime>`の翻訳

日時を翻訳される文章の中に表示したい場合があります。 <DateTime>コンポーネントを<T>コンポーネントでラップできます。

EventDate.jsx

import { T, DateTime } from 'gt-next';

export default function EventDate(event) {
    return (
        <T id="eventDate">
            The time of the event is <DateTime> {event.date} </DateTime>. // [!code highlight]
        </T>
    );
}

カスタムフォーマット

<DateTime>コンポーネントは、カスタムフォーマットオプションをサポートしています。

EventDate.jsx

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> などの他の変数コンポーネントの詳細や使用例については、変数コンポーネントの使い方ドキュメントをご覧ください。

<DateTime>

このページについて