<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-react';

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

ロケールの指定

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

EventDate.jsx


import { DateTime } from 'gt-react';

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

`<DateTime>`の翻訳

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

EventDate.jsx

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

EventDate.jsx

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

<DateTime>

このページについて