# General Translation React SDKs (gt-react, gt-next, gt-react-native): `` URL: https://generaltranslation.com/fr/docs/react/reference/components/datetime.mdx Docs index: https://generaltranslation.com/llms.txt Description: Met en forme une date et une heure pour le paramètre régional actif. Référence de l’API du composant ``. Le composant `` affiche une valeur `Date` sous la forme d’une date localisée, d’une heure localisée, ou des deux. Il prend en charge des options de formatage personnalisées et des surcharges de paramètre régional. *Disponible dans `gt-react`, `gt-next`, `gt-tanstack-start` et `gt-react-native`.* ## Vue d’ensemble [#overview] Passez un `Date` en tant qu’élément enfant, et `` le met en forme selon le paramètre régional actif. ```tsx {new Date(1738010355000)} // 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 : `` 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** `{}` La prop accepte [`Intl.DateTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options). Parmi les options courantes : | Option | Description | Type | Facultatif | Par défaut | | ------------------------ | ----------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | ---------- | -------------------------------------------------------- | | `localeMatcher` | Algorithme de correspondance des paramètres régionaux. | `'lookup' \| 'best fit'` | Oui | `'best fit'` | | `calendar` | Système de calendrier, tel que `gregory`, `chinese` ou `persian`. | `string` | Oui | `'gregory'` | | `numberingSystem` | Système de numérotation, tel que `latn` ou `arab`. | `string` | Oui | `'latn'` | | `hour12` | Indique s’il faut utiliser une horloge au format 12 heures. Remplace `hourCycle`. | `boolean` | Oui | Dépend du paramètre régional | | `hourCycle` | Cycle horaire utilisé par l’horloge. | `'h11' \| 'h12' \| 'h23' \| 'h24'` | Oui | Dépend du paramètre régional | | `timeZone` | Fuseau horaire IANA ou décalage UTC. | `string` | Oui | Fuseau horaire du runtime | | `weekday` | Longueur du nom du jour de la semaine. | `'long' \| 'short' \| 'narrow'` | Oui | — | | `era` | Longueur du libellé de l’ère. | `'long' \| 'short' \| 'narrow'` | Oui | — | | `year` | Année numérique ou sur deux chiffres. | `'numeric' \| '2-digit'` | Oui | `'numeric'` lorsqu’aucun style ni composant n’est défini | | `month` | Format du mois, numérique ou en toutes lettres. | `'numeric' \| '2-digit' \| 'long' \| 'short' \| 'narrow'` | Oui | `'numeric'` lorsqu’aucun style ni composant n’est défini | | `day` | Jour numérique ou sur deux chiffres. | `'numeric' \| '2-digit'` | Oui | `'numeric'` lorsqu’aucun style ni composant n’est défini | | `dayPeriod` | Longueur des libellés tels que « le matin » ou « la nuit ». | `'long' \| 'short' \| 'narrow'` | Oui | — | | `hour` | Heure numérique ou sur deux chiffres. | `'numeric' \| '2-digit'` | Oui | — | | `minute` | Minute numérique ou sur deux chiffres. | `'numeric' \| '2-digit'` | Oui | — | | `second` | Seconde numérique ou sur deux chiffres. | `'numeric' \| '2-digit'` | Oui | — | | `fractionalSecondDigits` | Nombre de chiffres après la virgule pour les secondes. | `1 \| 2 \| 3` | Oui | — | | `timeZoneName` | Longueur et style du libellé du fuseau horaire. | `'long' \| 'short' \| 'shortOffset' \| 'longOffset' \| 'shortGeneric' \| 'longGeneric'` | Oui | — | | `formatMatcher` | Algorithme de correspondance entre les options de composant et un format de paramètre régional. | `'basic' \| 'best fit'` | Oui | `'best fit'` | | `dateStyle` | Format de date préréglé. | `'full' \| 'long' \| 'medium' \| 'short'` | Oui | — | | `timeStyle` | Format d’heure préréglé. | `'full' \| 'long' \| 'medium' \| 'short'` | Oui | — | * `dateStyle` et `timeStyle` peuvent être utilisés ensemble, mais pas avec des options de composant telles que `weekday`, `year`, `month`, `day`, `hour`, `minute` ou `second`. * `hour12` remplace `hourCycle`. * `dayPeriod` n’affecte que les formats d’horloge sur 12 heures. * Les calendriers, systèmes de numérotation, libellés de fuseau horaire et valeurs d’option pris en charge dépendent du runtime JavaScript. Consultez la [documentation des options de `Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) pour connaître les dernières options disponibles et le comportement du runtime. ### `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] *Les exemples importent depuis `gt-react` ; importez plutôt depuis le paquet de votre framework.* ```tsx title="EventDate.tsx" import { DateTime } from 'gt-react'; export default function EventDate({ event }) { return {event.date}; // [!code highlight] } ``` ```tsx title="EventDate.tsx" import { DateTime } from 'gt-react'; export default function EventDate({ event }) { return {event.date}; // [!code highlight] } ``` ```tsx title="EventDate.tsx" import { T, DateTime } from 'gt-react'; export default function EventDate({ event }) { return ( The time of the event is {event.date}. // [!code highlight] ); } ``` ```tsx title="EventDate.tsx" import { DateTime } from 'gt-react'; export default function EventDate({ event }) { return ( {event.date} ); } ``` ## Éviter les erreurs d’hydratation [#hydration] Comme `` 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 {event.date} ``` ## Sitemap See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.