Components

<DateTime>

<DateTime>コンポーネントのAPIリファレンス

概要

<DateTime>コンポーネントは、フォーマットされた日付や時刻の文字列を表示し、フォーマットオプションやロケールなどのカスタマイズに対応しています。 日付や時刻は、現在のロケールおよび指定されたオプションのパラメータに従ってフォーマットされます。

<DateTime>{1738010355}</DateTime>
// Output: 1/27/2025

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

リファレンス

Props

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

このガイドはいかがですか?