# General Translation React SDKs (gt-react, gt-next, gt-react-native): `` URL: https://generaltranslation.com/ja/docs/react/reference/components/datetime.mdx Docs index: https://generaltranslation.com/llms.txt Description: アクティブなロケール向けに日付と時刻をフォーマットします。`` コンポーネントの API リファレンス。 `` コンポーネントは、`Date` の値をローカライズされた日付、時刻、またはその両方として表示します。カスタムの書式設定オプションとロケールの上書きに対応しています。 *`gt-react`、`gt-next`、`gt-tanstack-start`、`gt-react-native` で利用できます。* ## 概要 [#overview] `Date` を子要素として渡すと、`` がアクティブなロケールに合わせて整形します。 ```tsx {new Date(1738010355000)} // 出力: 1/27/2025 ``` すべての書式設定は、[`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) を使用してローカルで処理されます。 *注: `` は、サーバーレンダリングされたアプリで React のハイドレーションエラーを引き起こす可能性があります。詳しくは [ハイドレーションエラーを避ける](#hydration) を参照してください。* ## 仕組み [#how-it-works] * **ローカルでの書式設定。** 日付は `Intl.DateTimeFormat` を使ってブラウザ内で書式設定されます。この値が General Translation API に送信されることはありません。 * **ロケールの決定。** `locales` で上書きしない限り、アクティブなロケールに基づいて書式が決まります。 * **タイムゾーンに注意。** `timeZone` を明示的に指定しない場合、出力はランタイムのタイムゾーンに依存するため、サーバーとクライアントで異なることがあります。 ## Props [#props] | Prop | 説明 | 型 | 任意 | デフォルト | | ----------------------- | ----------------------------- | ---------------------------- | --- | ---------- | | [`children`](#children) | 書式設定する日付。 | `Date` | いいえ | — | | [`options`](#options) | `Intl.DateTimeFormat` のオプション。 | `Intl.DateTimeFormatOptions` | はい | `{}` | | [`locales`](#locales) | 書式設定に使用するロケールの上書き。 | `string[]` | はい | アクティブなロケール | | [`name`](#name) | エントリの変数名。 | `string` | はい | — | ### `children` [#children] **型** `Date` · **必須** 書式設定の対象となる日付または時刻を表す `Date` オブジェクトです。 ### `options` [#options] **型** `Intl.DateTimeFormatOptions` · **任意** · **デフォルト** `{}` この prop は [`Intl.DateTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) を受け取ります。主なオプションは次のとおりです。 | オプション | 説明 | 型 | 任意 | デフォルト | | ------------------------ | ------------------------------------ | --------------------------------------------------------------------------------------- | -- | -------------------------------------- | | `localeMatcher` | ロケール照合アルゴリズム。 | `'lookup' \| 'best fit'` | はい | `'best fit'` | | `calendar` | `gregory`、`chinese`、`persian` などの暦法。 | `string` | はい | `'gregory'` | | `numberingSystem` | `latn` や `arab` などの数字体系。 | `string` | はい | `'latn'` | | `hour12` | 12時間制を使用するかどうか。`hourCycle` より優先されます。 | `boolean` | はい | ロケール依存 | | `hourCycle` | 時刻表示で使用する時間サイクル。 | `'h11' \| 'h12' \| 'h23' \| 'h24'` | はい | ロケール依存 | | `timeZone` | IANA タイムゾーンまたは UTC オフセット。 | `string` | はい | ランタイム のタイムゾーン | | `weekday` | 曜日名の表示幅。 | `'long' \| 'short' \| 'narrow'` | はい | — | | `era` | 時代ラベルの表示幅。 | `'long' \| 'short' \| 'narrow'` | はい | — | | `year` | 数値または2桁の年。 | `'numeric' \| '2-digit'` | はい | スタイルまたはコンポーネントが設定されていない場合は `'numeric'` | | `month` | 数値または名前による月の形式。 | `'numeric' \| '2-digit' \| 'long' \| 'short' \| 'narrow'` | はい | スタイルまたはコンポーネントが設定されていない場合は `'numeric'` | | `day` | 数値または2桁の日。 | `'numeric' \| '2-digit'` | はい | スタイルまたはコンポーネントが設定されていない場合は `'numeric'` | | `dayPeriod` | 「午前」や「夜間」などのラベルの表示幅。 | `'long' \| 'short' \| 'narrow'` | はい | — | | `hour` | 数値または2桁の時。 | `'numeric' \| '2-digit'` | はい | — | | `minute` | 数値または2桁の分。 | `'numeric' \| '2-digit'` | はい | — | | `second` | 数値または2桁の秒。 | `'numeric' \| '2-digit'` | はい | — | | `fractionalSecondDigits` | 秒の小数部の桁数。 | `1 \| 2 \| 3` | はい | — | | `timeZoneName` | タイムゾーンラベルの表示幅とスタイル。 | `'long' \| 'short' \| 'shortOffset' \| 'longOffset' \| 'shortGeneric' \| 'longGeneric'` | はい | — | | `formatMatcher` | コンポーネントオプションをロケール形式に照合するアルゴリズム。 | `'basic' \| 'best fit'` | はい | `'best fit'` | | `dateStyle` | プリセットの日付形式。 | `'full' \| 'long' \| 'medium' \| 'short'` | はい | — | | `timeStyle` | プリセットの時刻形式。 | `'full' \| 'long' \| 'medium' \| 'short'` | はい | — | * `dateStyle` と `timeStyle` は併用できますが、`weekday`、`year`、`month`、`day`、`hour`、`minute`、`second` などのコンポーネントオプションとは併用できません。 * `hour12` は `hourCycle` より優先されます。 * `dayPeriod` は12時間制の形式にのみ影響します。 * サポートされる暦法、数字体系、タイムゾーンラベル、オプション値は JavaScript ランタイム によって異なります。 利用可能な最新のオプションと ランタイム の動作については、[`Intl.DateTimeFormat` オプションのドキュメント](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options)を参照してください。 ### `locales` [#locales] **Type** `string[]` · **Optional** · **Default** アクティブなロケール 書式設定の対象となるロケールです。省略した場合は、アクティブなロケールが使用されます。詳しくは [locales 引数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument) を参照してください。 ### `name` [#name] **Type** `string` · **任意** メタデータに使用する日付フィールドの名前です (省略可能) 。 ## 例 [#examples] *例では `gt-react` からインポートしています。代わりに、お使いのフレームワークのパッケージからインポートしてください。* ```tsx title="EventDate.tsx" import { DateTime } from 'gt-react'; export default function EventDate({ event }) { return {event.date}; // [!code highlight] } ``` ```tsx title="EventDate.tsx" import { DateTime } from 'gt-react'; export default function EventDate({ event }) { return {event.date}; // [!code highlight] } ``` ```tsx title="EventDate.tsx" import { T, DateTime } from 'gt-react'; export default function EventDate({ event }) { return ( The time of the event is {event.date}. // [!code highlight] ); } ``` ```tsx title="EventDate.tsx" import { DateTime } from 'gt-react'; export default function EventDate({ event }) { return ( {event.date} ); } ``` ## ハイドレーションエラーを避ける [#hydration] `` はローカル環境に応じて日付をフォーマットするため、サーバーとクライアントで異なる出力になることがあります。React がサーバーでレンダリングされた HTML とクライアント側のレンダリング結果を比較したときに一致しないと、ハイドレーションエラーが発生します。これは通常、次のような場合に起こります。 * **明示的に `timeZone` が設定されていない。** サーバーは UTC で動作し、ブラウザーはローカル時刻を使うことがあるため、タイムスタンプがサーバーでは `"1/27/2025"`、クライアントでは `"1/28/2025"` としてレンダリングされることがあります。 * **環境ごとにデフォルトロケールが異なる。** デフォルトロケールが一致していないと、異なる文字列が生成されます (たとえば `"27/01/2025"` と `"1/27/2025"`) 。 サーバーとクライアントで常に同じ文字列が生成されるよう、ロケールとタイムゾーンの両方を固定してください。 ```tsx {event.date} ``` ## Sitemap See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.