# gt-react: General Translation React SDK: DateTime
URL: https://generaltranslation.com/fr/docs/react/api/components/datetime.mdx
---
title: DateTime
description: Référence de l’API du composant DateTime
---

{/* GÉNÉRÉ AUTOMATIQUEMENT : ne modifiez pas ce fichier directement. Modifiez plutôt le modèle dans content/docs-templates/. */}


## Vue d’ensemble

Le composant `<DateTime>` affiche une date ou une heure formatée, avec des options de personnalisation telles que les options de formatage et le paramètre régional.
La date ou l’heure est formatée selon le paramètre régional actuel et les paramètres facultatifs fournis.

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

Le formatage est entièrement géré localement à l’aide de la bibliothèque [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat).

<Callout type="warn">
  `<DateTime>` peut provoquer des **erreurs d’hydratation React** dans les applications rendues côté serveur. Consultez [Éviter les erreurs d’hydratation](#avoiding-hydration-errors) ci-dessous.
</Callout>

## Référence

### Props

<TypeTable
  type={{
  "children?": {
      description: 'Contenu de date à mettre en forme.',
      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',
  },
}}
/>

### Description

| Nom de la prop | Description                                                                                                                                                                                                                                                                                                                                                                   |
| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children`     | Le contenu à afficher dans le composant. Il s’agit généralement d’une valeur de date ou d’heure. S’il est fourni, il est prioritaire sur la prop `value`.                                                                                                                                                                                                                     |
| `value`        | La valeur par défaut de la date ou de l’heure. Peut être une chaîne, un nombre (horodatage) ou un objet Date.                                                                                                                                                                                                                                                                 |
| `options`      | Options de formatage facultatives pour la date ou l’heure, conformément à la spécification [`Intl.DateTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat). Utilisez-les pour définir des styles tels que les noms des jours de la semaine, les fuseaux horaires, etc.                                   |
| `locales`      | Paramètres régionaux facultatifs permettant de définir le paramètre régional de formatage. S’ils ne sont pas fournis, le paramètre régional de l’utilisateur est utilisé. Pour en savoir plus sur la manière de spécifier les paramètres régionaux, consultez [ceci](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument). |

### Renvoie

Un `JSX.Element` contenant la date ou l’heure mise en forme sous forme de chaîne.

***

## Exemples

### Utilisation de base

Le composant `<DateTime>` permet d’afficher des dates ou des heures localisées.

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

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


### Spécifier des paramètres régionaux

Le composant `<DateTime>` peut être utilisé pour afficher des valeurs de date ou d’heure pour un paramètre régional donné.

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

import { DateTime } from 'gt-react';

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


### Traduire DateTime

Supposons que vous souhaitiez afficher la date et l’heure dans une phrase qui est elle aussi traduite.
Vous pouvez encapsuler le composant `<DateTime>` dans un composant `<T>`.

```jsx title="EventDate.jsx" copy
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>
    );
}
```


### Formatage personnalisé

Le composant `<DateTime>` prend en charge des options de formatage personnalisées.

```jsx title="EventDate.jsx" copy
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

Comme `<DateTime>` formate les dates localement avec `Intl.DateTimeFormat`, il peut produire **un résultat différent entre le serveur et le client**. Lorsque React compare le HTML généré côté serveur au rendu côté client et qu’ils ne correspondent pas, vous obtenez une erreur d’hydratation.

Cela se produit généralement lorsque :

* **Aucun `timeZone` explicite n’est défini.** Le serveur peut s’exécuter en UTC (ou dans un autre fuseau horaire), tandis que le navigateur de l’utilisateur utilise son fuseau horaire local. Une marque temporelle comme `1738010355` peut être rendue sous la forme `"1/27/2025"` sur le serveur, mais `"1/28/2025"` sur le client si les fuseaux horaires diffèrent.
* **Le paramètre régional par défaut diffère selon l’environnement.** Si le paramètre régional par défaut du serveur ne correspond pas à celui du client, la chaîne de caractères formatée peut différer (par ex. `"27/01/2025"` vs `"1/27/2025"`).

### Comment corriger cela

**Définissez un `timeZone` explicite dans `options`** pour garantir un résultat cohérent :

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

**Spécifiez explicitement les `locales`** pour éviter les incompatibilités entre paramètres régionaux :

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

En fixant à la fois le paramètre régional et le fuseau horaire, le serveur et le client produiront toujours la même chaîne de caractères formatée.


## Remarques

* Le composant `<DateTime>` est un composant variable qui peut être utilisé pour mettre en forme des valeurs de date et d’heure.
* Le composant utilise la bibliothèque [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) pour la mise en forme.

## Prochaines étapes

* Pour en savoir plus et voir des exemples d’utilisation du composant `<DateTime>` et d’autres composants variables comme `<Currency>`, `<Num>` et `<Var>`, consultez la documentation [Utilisation des composants variables](/docs/react/guides/variables).