<DateTime>

Aperçu

Le composant <DateTime> rend une chaîne de date ou d'heure formatée, prenant en charge la personnalisation telle que les options de formatage et la locale. La date ou l'heure est formatée selon la locale actuelle et tous les paramètres optionnels passés.

<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
`children??`	`any`	`undefined`
`name??`	`string`	`undefined`
`value??`	`string \| number \| Date`	`undefined`
`options??`	`Intl.DateTimeFormatOptions`	`{}`
`locales??`	`string[]`	`undefined`

Description

Nom du Prop	Description
`children`	Le contenu à rendre à l'intérieur du composant. Typiquement une valeur de date ou d'heure. Si fourni, il prend le pas sur le 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 tels que les noms de jours de la semaine, les fuseaux horaires, et plus encore.
`locales`	Locales facultatives pour spécifier la locale de formatage. Si non fourni, la locale de l'utilisateur est utilisée. En savoir plus sur la spécification des locales ici.

Renvoie

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

Traduction de `<DateTime>`

Disons 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-next';
 
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 les options de formatage personnalisé.

EventDate.jsx

import { DateTime } from 'gt-next';
 
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 les 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> et d'autres composants variables comme <Currency>, <Num>, et <Var>, consultez la documentation Utilisation des composants variables.

<DateTime>

Sur cette page