Panoramica

Il componente <DateTime> visualizza una stringa di data o ora formattata, con possibilità di personalizzazione come opzioni di formattazione e impostazioni locali. La data o l'ora viene formattata in base alle impostazioni locali correnti e a eventuali parametri opzionali forniti.

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

Tutta la formattazione viene gestita localmente tramite la libreria Intl.DateTimeFormat.

Riferimenti

Props

Descrizione

Restituisce

JSX.Element che contiene la data o l'ora formattata come stringa.

Esempi

Utilizzo di base

Il componente <DateTime> può essere usato per visualizzare date e orari localizzati.

import { DateTime } from 'gt-react';

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

Specificare le impostazioni locali

Il componente <DateTime> può essere utilizzato per visualizzare valori di data o ora in una specifica impostazione locale.

import { DateTime } from 'gt-react';

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

Tradurre <DateTime>

Mettiamo che tu voglia mostrare la data e l’ora all’interno di una frase che viene tradotta. Puoi racchiudere il componente <DateTime> nel componente <T>.

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

export default function EventDate(event) {
    return (
        <T id="eventDate">
            L'orario dell'evento è <DateTime> {event.date} </DateTime>. // [!code highlight]
        </T>
    );
}

Formattazione personalizzata

Il componente <DateTime> supporta opzioni di formattazione personalizzate.

import { DateTime } from 'gt-react';

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

Note

• Il componente <DateTime> è un componente dinamico che può essere utilizzato per formattare valori di data e ora.
• Il componente usa la libreria Intl.DateTimeFormat per la formattazione.

Prossimi passaggi

• Per ulteriori dettagli ed esempi d’uso del componente <DateTime> e di altri componenti di variabili come <Currency>, <Num> e <Var>,