Présentation

Le composant <DateTime> affiche une chaîne de date ou d’heure formatée, avec la possibilité de personnaliser les options de formatage et la 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

Tous les formats sont gérés localement à l’aide de la bibliothèque Intl.DateTimeFormat.

Référence

Props

Description

Renvoie

JSX.Element contenant la date ou l’heure mises en forme 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-react';

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

Spécifier les locales

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

import { DateTime } from 'gt-react';

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

Traduction de <DateTime>

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

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

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-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 de type variable qui permet de formater des valeurs de date et d’heure.
• Le composant utilise l’API 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>,