Descripción general

El componente <DateTime> muestra una cadena de fecha u hora formateada y admite personalización, como options de formato y locale. La fecha u hora se formatea según la locale actual y los parámetros opcionales proporcionados.

<DateTime>{1738010355}</DateTime>
// Resultado: 27/1/2025

Todo el formateo se maneja localmente con la biblioteca Intl.DateTimeFormat.

Referencias

Props

Descripción

Devuelve

JSX.Element que contiene la fecha u hora formateada como cadena.

Ejemplos

Uso básico

El componente <DateTime> se puede usar para mostrar valores de fecha u hora con localización.

import { DateTime } from 'gt-react';

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

Especificar locales

El componente <DateTime> se puede usar para mostrar valores de fecha u hora en un locale específico.

import { DateTime } from 'gt-react';

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

Traducción de <DateTime>

Supongamos que quieres mostrar la fecha y hora dentro de una frase que también se está traduciendo. Puedes envolver el componente <DateTime> dentro de un componente <T>.

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

export default function EventDate(event) {
    return (
        <T id="eventDate">
            La hora del evento es <DateTime> {event.date} </DateTime>. // [!code highlight]
        </T>
    );
}

Formato personalizado

El componente <DateTime> admite options de formato personalizadas.

import { DateTime } from 'gt-react';

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

Notas

• El componente <DateTime> es un componente de tipo Variable que se puede usar para dar formato a valores de fecha y hora.
• El componente utiliza la biblioteca Intl.DateTimeFormat para dar formato.

Próximos pasos

• Para obtener más detalles y ejemplos de uso del componente <DateTime> y de otros componentes de variables como <Currency>, <Num> y <Var>,