<DateTime>

Aperçu

Le composant <DateTime> affiche une chaîne de date ou d'heure formatée, prenant en charge la personnalisation telle que 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 de la Prop	Description
`children`	Le contenu à rendre à l'intérieur du composant. Généralement une valeur de date ou d'heure. Si fourni, il prend la priorité 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 optionnelles 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 optionnelles 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.

Retourne

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>`

Supposons que vous souhaitez que la date et l'heure soient affichées dans une phrase é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 des options de formatage personnalisées.

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> ainsi que d'autres composants de variables comme <Currency>, <Num>, et <Var>, consultez la documentation Utilisation des composants de variables.

<DateTime>

Sur cette page