<DateTime>

概要

<DateTime> コンポーネントは、フォーマットされた日付または時刻の文字列をレンダリングし、フォーマットオプションやロケールなどのカスタマイズをサポートします。日付または時刻は、現在のロケールと渡された任意のパラメータに従ってフォーマットされます。

<DateTime>{1738010355}</DateTime>
// 出力: 1/27/2025

すべてのフォーマットは、Intl.DateTimeFormat ライブラリを使用してローカルで処理されます。

リファレンス

Props

Prop	Type	Default
`children??`	`any`	`undefined`
`name??`	`string`	`undefined`
`value??`	`string \| number \| Date`	`undefined`
`options??`	`Intl.DateTimeFormatOptions`	`{}`
`locales??`	`string[]`	`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">
            イベントの時間は <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>

このページについて