<DateTime>

Aperçu

Le composant <DateTime> affiche une chaîne de date ou d'heure formatée, prenant en charge la personnalisation comme les options de formatage et la langue. La date ou l'heure est formatée selon la langue actuelle et tous les paramètres optionnels transmis.

<DateTime>{1738010355}</DateTime>
// Output: 1/27/2025

Tout le formatage est géré localement à l'aide de la bibliothèque Intl.DateTimeFormat.

Référence

Props

Prop	Type	Default
`locales??`	`string[]`	`undefined`
`options??`	`Intl.DateTimeFormatOptions`	`{}`
`value??`	`string \| number \| Date`	`undefined`
`name??`	`string`	`undefined`
`children??`	`any`	`undefined`

Description

Nom du prop	Description
`children`	Le contenu à afficher à l'intérieur du composant. Il s'agit généralement d'une valeur de date ou d'heure. Si fourni, il prend le dessus sur la prop `value`.
`value`	La valeur par défaut pour la date ou l'heure. Peut être une chaîne, un nombre (timestamp) ou un objet Date.
`options`	Options de formatage facultatives pour la date ou l'heure, suivant la spécification `Intl.DateTimeFormatOptions`. Utilisez ceci pour définir des styles comme les noms des jours de la semaine, les fuseaux horaires, et plus encore.
`locales`	Locales optionnelles pour spécifier la langue de formatage. Si non fourni, la langue de l'utilisateur est utilisée. En savoir plus sur la spécification des locales ici.

Retour

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 valeurs de date ou d'heure localisées.

EventDate.jsx

import { DateTime } from 'gt-react';

export default function EventDate(event) {
    return (
        <DateTime> {event.date} </DateTime>. 
    );
}

Spécification des locales

Le composant <DateTime> peut être utilisé pour afficher des valeurs de date ou d'heure dans une locale spécifique.

EventDate.jsx


import { DateTime } from 'gt-react';

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

Traduction de `<DateTime>`

Supposons que vous souhaitez que la date et l'heure soient affichées dans une phrase qui est également traduite. Vous pouvez envelopper le composant <DateTime> dans un composant <T>.

EventDate.jsx

import { T, DateTime } from 'gt-react';

export default function EventDate(event) {
    return (
        <T id="eventDate">
            L'heure de l'événement est <DateTime> {event.date} </DateTime>. // [!code highlight]
        </T>
    );
}

Formatage personnalisé

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

EventDate.jsx

import { DateTime } from 'gt-react';

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

Notes

Le composant <DateTime> est un composant variable qui peut être utilisé pour formater des valeurs de date et d'heure.
Le composant utilise la bibliothèque Intl.DateTimeFormat pour le formatage.

Prochaines étapes

Pour plus de détails et des exemples d'utilisation du composant <DateTime> ainsi que d'autres composants de variables comme <Currency>, <Num> et <Var>, consultez la documentation Utilisation des composants de variables.

<DateTime>

Sur cette page