# react-native: DateTime
URL: https://generaltranslation.com/ja/docs/react-native/api/components/datetime.mdx
---
title: DateTime
description: DateTime コンポーネントの API リファレンス
---

{/* 自動生成: 直接編集しないでください。代わりに content/docs-templates/ の template を編集してください。 */}


## 概要

`<DateTime>` コンポーネントは、書式設定オプションやロケールなどを指定して、書式設定済みの日付または時刻の文字列を表示します。
日付または時刻は、現在のロケールと指定された任意のパラメータに基づいてフォーマットされます。

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

すべての書式設定は、[`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)ライブラリを使用してローカルで行われます。

<Callout type="warn">
  `<DateTime>` は、サーバーサイドでレンダリングされるアプリで **React の ハイドレーションエラー** を引き起こす可能性があります。詳しくは、以下の[ハイドレーションエラーを回避する](#avoiding-hydration-errors)を参照してください。
</Callout>


## リファレンス

### プロパティ

<TypeTable
  type={{
  "children?": {
      description: 'フォーマット対象の日付コンテンツ。',
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "name?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "value?": {
      type: 'string | number | Date',
      optional: true,
      default: 'undefined',
  },
  "options?": {
      type: 'Intl.DateTimeFormatOptions',
      optional: true,
      default: '{}',
  },
  "locales?": {
      type: 'string[]',
      optional: true,
      default: 'undefined',
  },
}}
/>

### 説明

| プロパティ名     | 説明                                                                                                                                                                                                     |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `children` | コンポーネント内にレンダリングする内容です。通常は日付または時刻の値を指定します。指定した場合は、`value` プロパティより優先されます。                                                                                                                                |
| `value`    | 日付または時刻のデフォルト値です。文字列、数値 (タイムスタンプ) 、または Date オブジェクトを指定できます。                                                                                                                                             |
| `options`  | 日付または時刻の任意の書式設定オプションです。[`Intl.DateTimeFormatOptions` 仕様](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)に従います。曜日名やタイムゾーンなどのスタイルを定義する際に使用します。     |
| `locales`  | 書式設定に使用するロケールを指定するための任意の `locales` です。指定しない場合は、ユーザーのロケールが使用されます。ロケールの指定方法について詳しくは[こちら](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument)をご覧ください。 |

### 戻り値

文字列として整形された日付または時刻を含む`JSX.Element`。

***

## 例

### 基本的な使い方

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

```jsx title="EventDate.jsx" copy
import { DateTime } from 'gt-react-native';

export default function EventDate(event) {
    return (
        <DateTime> {event.date} </DateTime>. // [!code highlight]
    );
}
```


### ロケールを指定する

`<DateTime>` コンポーネントを使うと、日付や時刻の値を特定のロケールで表示できます。

```jsx title="EventDate.jsx" copy

import { DateTime } from 'gt-react-native';

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


### DateTime の翻訳

翻訳される文の中に日時を表示したい場合は、`<DateTime>` コンポーネントを `<T>` コンポーネントで囲めます。

```jsx title="EventDate.jsx" copy
import { T, DateTime } from 'gt-react-native';

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


### カスタム書式設定

`<DateTime>` コンポーネントは、カスタムの書式設定オプションをサポートしています。

```jsx title="EventDate.jsx" copy
import { DateTime } from 'gt-react-native';

export default function EventDate(event) {
    return (
        <DateTime options={{
            dateStyle: 'full', // [!code highlight]
            timeStyle: 'long', // [!code highlight]
            timeZone: 'Australia/Sydney', // [!code highlight]
        }}>
            {event.date}
        </DateTime>.
    );
}
```

***


## ハイドレーションエラーを回避する

`<DateTime>` は `Intl.DateTimeFormat` を使って日付をローカルで書式設定するため、**サーバーとクライアントで異なる出力になる**ことがあります。React がサーバーでレンダリングされた HTML とクライアント側のレンダリング結果を比較したときに一致しないと、ハイドレーションエラーが発生します。

これは通常、次のような場合に起こります。

* **明示的な `timeZone` が設定されていない。** サーバーは UTC (または別のタイムゾーン) で動作していても、ユーザーのブラウザーはそのユーザーのローカルタイムゾーンを使います。`1738010355` のようなタイムスタンプは、タイムゾーンが異なると、サーバーでは `"1/27/2025"` としてレンダリングされても、クライアントでは `"1/28/2025"` としてレンダリングされる可能性があります。
* **環境ごとにデフォルトロケールが異なる。** サーバーのデフォルトロケールがクライアントと一致しない場合、書式設定された文字列が異なることがあります (例: `"27/01/2025"` と `"1/27/2025"`) 。

### 修正方法

一貫した出力にするには、**`options` で `timeZone` を明示的に設定してください**。

```jsx
<DateTime options={{ timeZone: 'America/New_York' }}>
  {event.date}
</DateTime>
```

**ロケールの不一致を避けるため、`locales` を明示的に指定します:**

```jsx
<DateTime locales={['en-US']} options={{ timeZone: 'UTC' }}>
  {event.date}
</DateTime>
```

ロケールとタイムゾーンの両方を固定すると、サーバーとクライアントは常に同じ書式設定済み文字列を生成します。


## 注記

* `<DateTime>` コンポーネントは、日付や時刻の値を書式設定するために使用できる変数コンポーネントです。
* このコンポーネントは、書式設定に [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) ライブラリを使用します。

## 次のステップ

* `<DateTime>` コンポーネントや、`<Currency>`、`<Num>`、`<Var>` などの他の変数コンポーネントの詳しい説明や使用例については、[変数コンポーネントの使用](/docs/react-native/guides/variables) のドキュメントを参照してください。