Vue d’ensemble

Le composant <DateTime> affiche une date ou une heure formatée, avec prise en charge de la personnalisation (options de formatage et locale). La date ou l’heure est formatée en fonction de la locale active et des éventuels paramètres optionnels fournis.

<DateTime>{1738010355}</DateTime>
// Sortie : 27/01/2025

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

Références

Props

Description

Renvoie

JSX.Element contenant la date ou l’heure formatée sous forme de chaîne.

Exemples

Utilisation de base

Le composant <DateTime> permet d’afficher des valeurs de date ou d’heure localisées.

import { DateTime } from 'gt-next';

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

Spécifier les locales

Le composant <DateTime> peut être utilisé pour afficher des dates ou des heures dans une locale spécifique.

import { DateTime } from 'gt-next';

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

Traduction de <DateTime>

Supposons que vous souhaitiez afficher la date et l’heure dans une phrase elle aussi traduite. Vous pouvez envelopper le composant <DateTime> dans un composant <T>.

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

export default function EventDate(event) {
    return (
        <T id="eventDate">
            La date 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.

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 de type variable qui permet de formater des valeurs de date et d’heure.
• Le composant s’appuie sur 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 de variables comme <Currency>, <Num> et <Var>,