# react-native: DateTime
URL: https://generaltranslation.com/fr/docs/react-native/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 le modèle dans content/docs-templates/ à la place. */}


## Vue d’ensemble

Le composant `<DateTime>` affiche une chaîne de date ou d’heure mise en forme, avec des options de personnalisation comme les options de formatage et le paramètre régional.
La date ou l’heure est mise en forme selon le paramètre régional actuel et les paramètres optionnels transmis.

```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 de React** dans les applications rendues côté serveur. Voir [Éviter les erreurs d’hydratation](#avoiding-hydration-errors) ci-dessous.
</Callout>


## Référence

### Props

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

| Prop Name  | 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 de date ou d’heure par défaut. 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 de jours, les fuseaux horaires, etc.                                               |
| `locales`  | Paramètres régionaux facultatifs pour spécifier 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 façon de spécifier des paramètres régionaux, consultez [cette page](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 formatée sous forme de chaîne.

***

## Exemples

### Utilisation de base

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

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

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


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

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

```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]
    );
}
```


### Traduire DateTime

Supposons que vous souhaitiez 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-react-native';

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-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>.
    );
}
```

***


## Éviter les erreurs d’hydratation

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

Cela se produit généralement dans les cas suivants :

* **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 résoudre le problème

**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 incohérences de 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 une chaîne de caractères formatée identique.


## 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 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 [Utiliser les composants variables](/docs/react-native/guides/variables).