# General Translation React SDKs (gt-react, gt-next): DateTime
URL: https://generaltranslation.com/fr/docs/react/reference/components/datetime.mdx
---

title: DateTime
description: Met en forme une date et une heure pour le paramètre régional actif avec General Translation gt-react. Référence de l’API de DateTime.

---

Le composant `<DateTime>` affiche une date ou une heure mise en forme selon le paramètre régional actif. Il prend en charge des options de mise en forme personnalisées et des surcharges de paramètre régional.

*Disponible dans `gt-react`, `gt-next`, `gt-tanstack-start` et `gt-react-native`. Les exemples importent depuis `gt-react` ; importez plutôt depuis le package de votre framework.*

## Vue d’ensemble [#overview]

Passez un `Date` en tant qu’élément enfant, et `<DateTime>` le met en forme selon le paramètre régional actif.

```tsx
<DateTime>{new Date(1738010355000)}</DateTime>
// Résultat : 1/27/2025
```

Le formatage est entièrement géré localement avec [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat).

*Remarque : `<DateTime>` peut provoquer des erreurs d’hydratation de React dans les applications rendues côté serveur. Voir [Éviter les erreurs d’hydratation](#hydration).*

## Fonctionnement [#how-it-works]

* **Mise en forme locale.** La date est mise en forme dans le navigateur à l’aide de `Intl.DateTimeFormat`. Sa valeur n’est jamais envoyée à l’API de traduction de General Translation.
* **Résolution du paramètre régional.** Le paramètre régional actif détermine la mise en forme, sauf s’il est remplacé par `locales`.
* **Le fuseau horaire compte.** Sans `timeZone` explicite, le résultat dépend du fuseau horaire du runtime, qui peut différer entre le serveur et le client.

## Props [#props]

| Prop                    | Description                                                                     | Type                         | Facultatif | Par défaut               |
| ----------------------- | ------------------------------------------------------------------------------- | ---------------------------- | ---------- | ------------------------ |
| [`children`](#children) | La date à formater.                                                             | `Date`                       | Non        | —                        |
| [`options`](#options)   | Options de `Intl.DateTimeFormat`.                                               | `Intl.DateTimeFormatOptions` | Oui        | `{}`                     |
| [`locales`](#locales)   | Paramètre régional à utiliser à la place de celui par défaut pour le formatage. | `string[]`                   | Oui        | Paramètre régional actif |
| [`name`](#name)         | Nom de variable de l’entrée.                                                    | `string`                     | Oui        | —                        |

### `children` [#children]

**Type** `Date` · **Obligatoire**

La date ou l’heure à formater, sous forme d’objet `Date`.

### `options` [#options]

**Type** `Intl.DateTimeFormatOptions` · **Facultatif** · **Par défaut** `{}`

Options de mise en forme conformes à la spécification [`Intl.DateTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat), comme `dateStyle`, `timeStyle` et `timeZone`.

### `locales` [#locales]

**Type** `string[]` · **Facultatif** · **Par défaut** Paramètre régional actif

Paramètres régionaux à utiliser pour le formatage. S’il est omis, le paramètre régional actif est utilisé. Voir l’[argument locales](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument).

### `name` [#name]

**Type** `string` · **Facultatif**

Nom facultatif du champ de date, utilisé pour les métadonnées.

## Exemples [#examples]

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

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

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

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

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

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

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

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

## Éviter les erreurs d’hydratation [#hydration]

Comme `<DateTime>` formate les dates localement, il peut produire un résultat différent côté serveur et côté client. Lorsque React compare le HTML généré côté serveur au rendu côté client et qu’ils ne correspondent pas, une erreur d’hydratation se produit. Cela arrive généralement dans les cas suivants :

* **Aucun `timeZone` explicite n’est défini.** Le serveur peut fonctionner en UTC tandis que le navigateur utilise l’heure locale. Un horodatage peut donc s’afficher sous la forme `"1/27/2025"` sur le serveur et `"1/28/2025"` sur le client.
* **Le paramètre régional par défaut diffère selon les environnements.** Un paramètre régional par défaut non concordant produit des chaînes différentes (par exemple, `"27/01/2025"` contre `"1/27/2025"`).

Définissez explicitement le paramètre régional et le fuseau horaire afin que le serveur et le client produisent toujours la même chaîne :

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