Vue d’ensemble

Le composant <DateTime> rend une date ou une heure formatée, avec la possibilité de personnaliser, notamment les options de formatage et la locale. La date ou l’heure est formatée en fonction de la locale actuelle et de tout paramètre optionnel transmis.

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

Toute la mise en forme est effectuée 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 dates et des heures localisées.

import { DateTime } from 'gt-react';

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

Spécifier les locales

Le composant <DateTime> permet d’afficher des dates ou des heures selon une locale spécifique.

import { DateTime } from 'gt-react';

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

Traduction de <DateTime>

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

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

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-react';

export default function EventDate(event) {
    return (
        <DateTime options={{
            dateStyle: 'full', 
            timeStyle: 'long', 
            timeZone: 'Australia/Sydney', 
        }}>
            {event.date}
        </DateTime>
    );
}

Remarques

• Le composant <DateTime> est un composant de variable qui peut être utilisé pour formater des dates et des 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> ainsi que d’autres composants de variables comme <Currency>, <Num> et <Var>,