Présentation

Le composant <DateTime> génère une chaîne de date ou d’heure formatée, avec prise en charge de la personnalisation (options de formatage, locale). La date ou l’heure est formatée en fonction de la locale active et de tout paramètre optionnel fourni.

<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 de caractères.

Exemples

Utilisation de base

Le composant <DateTime> permet d’afficher des dates et des heures 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>

Disons que vous voulez afficher la date et l’heure dans une phrase qui est 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">
            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.

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 variables qui peut être utilisé pour mettre en forme des dates et heures.
• 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 variables comme <Currency>, <Num> et <Var>,