# vue: <DateTime>
URL: https://generaltranslation.com/ja/docs/vue/reference/components/datetime.mdx
---
title: "<DateTime>"
description: アクティブなロケールに合わせて日付または時刻をフォーマットします。<DateTime> コンポーネントの API リファレンス。

---

`<DateTime>` コンポーネントは、必須の日付のような値 `value` を `Intl.DateTimeFormat` でフォーマットします。単独で使用することも、[`<T>`](/docs/vue/reference/components/t) 内のランタイム変数として使用することもできます。

## 概要 [#overview]

`Date`、エポックミリ秒の数値、または日付文字列を`value`にバインドします。

```vue
<DateTime
  :value="publishedAt"
  :options="{ dateStyle: 'medium', timeZone: 'UTC' }"
/>
```

フォーマットはローカルで行われます。値はリッチ翻訳のソースには含まれません。

## 仕組み [#how-it-works]

* `Date` は直接書式設定されます。数値と文字列は、まず JavaScript の `Date` コンストラクターに渡されます。
* `null` と空白文字だけの文字列は空としてレンダリングされます。無効な日付文字列はそのままレンダリングされます。
* 日付文字列の解析とデフォルトのタイムゾーンは、JavaScript ランタイムに依存します。環境間で出力を一致させる必要がある場合は、曖昧さのないタイムスタンプを使用し、`timeZone` を設定してください。
* フォーマッタのスロットの children は無視されます。常に `value` を指定し、自己終了タグを使用してください。
* このコンポーネントは HTML ラッパーを追加しません。

### ロケール解決

アクティブなロケールが設定されたデフォルトロケールの場合、フォーマットではそのデフォルトロケールのみが使用され、`locales` は無視されます。それ以外の場合、スタンドアロンのフォーマッタは明示的に指定された `locales`、アクティブなロケール、デフォルトロケールの順に使用を試みます。

[`<T>`](/docs/vue/reference/components/t) 内では、ソースのフォールバックコンテンツにはデフォルトロケールが使用されます。翻訳済みコンテンツではアクティブなロケール、デフォルトロケールの順に使用が試みられ、明示的に指定された `locales` prop は無視されます。

## Props [#props]

| Prop                  | 説明                              | 型                               | 任意  | デフォルト   |
| --------------------- | ------------------------------- | ---------------------------------- | --- | --------- |
| [`value`](#value)     | フォーマットする日付のような値。                | `Date \| number \| string \| null` | いいえ | —         |
| [`options`](#options) | `Intl.DateTimeFormat` に渡すオプション。 | `Intl.DateTimeFormatOptions`       | はい  | `{}`      |
| [`locales`](#locales) | 優先するフォーマット用ロケール。                | `string[]`                         | はい  | ロケール解決の順序 |

### `value`

**型** `Date | number | string | null` · **必須**

フォーマット対象の値です。number は Unix エポックからのミリ秒を表します。string を渡す場合は、ランタイムによって他の日付形式の解析結果が異なる可能性があるため、ISO 8601 タイムスタンプを使用することを推奨します。

### `options`

**型** `Intl.DateTimeFormatOptions` · **任意** · **デフォルト** `{}`

JavaScript ランタイムの `Intl.DateTimeFormat` 実装に渡されるオプションです。主なオプションは次のとおりです。

| オプション                    | 説明                                           | 型                                                         | 任意 | デフォルト        |
| ------------------------ | -------------------------------------------- | --------------------------------------------------------- | -- | ------------ |
| `localeMatcher`          | ロケール照合アルゴリズム。                                | `'lookup' \| 'best fit'`                                  | はい | `'best fit'` |
| `calendar`               | `gregory` や `japanese` などの暦法。                | `string`                                                  | はい | ロケール依存       |
| `numberingSystem`        | `latn` や `arab` などの数字体系。                     | `string`                                                  | はい | ロケール依存       |
| `timeZone`               | `UTC` や `America/New_York` などの IANA タイムゾーン名。 | `string`                                                  | はい | ランタイムのタイムゾーン |
| `dateStyle`              | 定義済みの日付の表示形式。                                | `'full' \| 'long' \| 'medium' \| 'short'`                 | はい | —            |
| `timeStyle`              | 定義済みの時刻の表示形式。                                | `'full' \| 'long' \| 'medium' \| 'short'`                 | はい | —            |
| `hour12`                 | 12 時間制を使用するかどうか。                             | `boolean`                                                 | はい | ロケール依存       |
| `hourCycle`              | 時刻表記の周期。                                     | `'h11' \| 'h12' \| 'h23' \| 'h24'`                        | はい | ロケール依存       |
| `weekday`                | 曜日の表示形式。                                     | `'long' \| 'short' \| 'narrow'`                           | はい | —            |
| `era`                    | 元号の表示形式。                                     | `'long' \| 'short' \| 'narrow'`                           | はい | —            |
| `year`                   | 年の表示形式。                                      | `'numeric' \| '2-digit'`                                  | はい | —            |
| `month`                  | 月の表示形式。                                      | `'numeric' \| '2-digit' \| 'long' \| 'short' \| 'narrow'` | はい | —            |
| `day`                    | 日の表示形式。                                      | `'numeric' \| '2-digit'`                                  | はい | —            |
| `hour`                   | 時の表示形式。                                      | `'numeric' \| '2-digit'`                                  | はい | —            |
| `minute`                 | 分の表示形式。                                      | `'numeric' \| '2-digit'`                                  | はい | —            |
| `second`                 | 秒の表示形式。                                      | `'numeric' \| '2-digit'`                                  | はい | —            |
| `fractionalSecondDigits` | 小数秒の精度。                                      | `1 \| 2 \| 3`                                             | はい | —            |
| `timeZoneName`           | タイムゾーン名の表示形式。                                | `string`                                                  | はい | —            |

この組み合わせを受け付けないランタイムでは、`dateStyle` または `timeStyle` を個別の日付・時刻フィールドと組み合わせないでください。ランタイムで定義されるすべてのオプションについては、[`Intl.DateTimeFormat` のオプション](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options)を参照してください。

### `locales`

**型** `string[]` · **任意** · **デフォルト** ロケール解決の順序

スタンドアロンでのフォーマット時に優先される BCP 47 ロケールコードです。アクティブなロケールが設定されたデフォルトロケールと異なる場合にのみ、アクティブなロケールおよびデフォルトロケールより先に試行されます。

## 例 [#examples]

```vue title="PublishedAt.vue"
<script setup lang="ts">
import { DateTime, T } from 'gt-vue';

defineProps<{ publishedAt: Date }>();
</script>

<template>
  <T>
    Published
    <DateTime
      :value="publishedAt"
      :options="{ dateStyle: 'long', timeZone: 'UTC' }"
    />.
  </T>
</template>
```

## サーバーレンダリング [#ssr]

サーバーとクライアントでは、デフォルトのロケールやタイムゾーンが異なる場合があります。そのため、hydration 時に異なる文字列が生成される可能性があります。両方の [`createGT()`](/docs/vue/reference/functions/create-gt) プラグインで同じロケールを明示的に設定し、フォーマッタのタイムゾーンを固定してください：

```vue
<DateTime
  :value="publishedAt"
  :locales="['en-US']"
  :options="{ dateStyle: 'medium', timeZone: 'UTC' }"
/>
```

サーバーサイドレンダリングとクライアントのハイドレーションの前に、同じロケールカタログをプリロードします。アクティブなロケールが設定されたデフォルトと一致する場合、コンポーネントは明示的に指定した`locales`リストを意図的に無視し、そのデフォルトを使用してフォーマットすることに注意してください。