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

{/* GÉNÉRÉ AUTOMATIQUEMENT : ne modifiez pas 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 comme le 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
```

Tout le formatage est effectué 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. Voir [Éviter les erreurs d’hydratation](#avoiding-hydration-errors) plus bas.
</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 prévaut 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`      | Tableau `locales` facultatif permettant de spécifier le paramètre régional de formatage. S’il n’est pas fourni, le paramètre régional de l’utilisateur est utilisé. Pour en savoir plus sur la façon de spécifier les paramètres régionaux, consultez [ce lien](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument). |

### Renvoie

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

***

## Exemples

### Utilisation de base

Le composant `<DateTime>` peut être utilisé pour afficher des dates ou des heures localisées.

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

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


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

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

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

import { DateTime } from 'gt-next';

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


### Traduire DateTime

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

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

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-next';

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 à l’aide de `Intl.DateTimeFormat`, il peut produire **un rendu différent sur 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 y remédier

**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 `locales`** pour éviter les discordances de paramètres régionaux :

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

En figeant à 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 permet de formater des valeurs de date et d’heure.
* Le composant s’appuie sur la bibliothèque [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) pour le formatage.

## Étapes suivantes

* Pour plus de détails et d&#39;exemples d&#39;utilisation du composant `<DateTime>` et d&#39;autres composants variables comme `<Currency>`, `<Num>` et `<Var>`, consultez la documentation [Utilisation des composants variables](/docs/next/guides/variables).