<DateTime>

Descripción general

El componente <DateTime> muestra una cadena de fecha u hora formateada, permitiendo personalización como opciones de formato y configuración regional. La fecha u hora se formatea según la configuración regional actual y cualquier parámetro opcional proporcionado.

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

Todo el formateo se realiza localmente utilizando la biblioteca Intl.DateTimeFormat.

Referencia

Props

Prop	Type	Default
`locales??`	`string[]`	`undefined`
`options??`	`Intl.DateTimeFormatOptions`	`{}`
`value??`	`string \| number \| Date`	`undefined`
`name??`	`string`	`undefined`
`children??`	`any`	`undefined`

Descripción

Nombre del Prop	Descripción
`children`	El contenido que se renderiza dentro del componente. Normalmente es un valor de fecha u hora. Si se proporciona, tiene prioridad sobre la prop `value`.
`value`	El valor predeterminado para la fecha u hora. Puede ser una cadena, un número (timestamp) o un objeto Date.
`options`	Opciones de formato opcionales para la fecha u hora, siguiendo la especificación de `Intl.DateTimeFormatOptions`. Utiliza esto para definir estilos como nombres de días de la semana, zonas horarias y más.
`locales`	Locales opcionales para especificar la configuración regional de formato. Si no se proporciona, se utiliza la configuración regional del usuario. Lee más sobre cómo especificar locales aquí.

Retorna

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

Ejemplos

Uso básico

El componente <DateTime> se puede usar para mostrar valores de fecha u hora localizados.

EventDate.jsx

import { DateTime } from 'gt-next';

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

Especificar configuraciones regionales

El componente <DateTime> se puede usar para mostrar valores de fecha u hora en una configuración regional específica.

EventDate.jsx


import { DateTime } from 'gt-next';

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

Traducir `<DateTime>`

Supongamos que quieres que la fecha y hora se muestren en una oración que también está siendo traducida. Puedes envolver el componente <DateTime> en un componente <T>.

EventDate.jsx

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

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 opciones de formato personalizadas.

EventDate.jsx

import { DateTime } from 'gt-next';

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 variable que se puede usar para formatear valores de fecha y hora.
El componente utiliza la biblioteca Intl.DateTimeFormat para el formateo.

Próximos pasos

Para obtener más detalles y ejemplos de uso del componente <DateTime> y otros componentes de variables como <Currency>, <Num> y <Var>, consulta la documentación de Uso de componentes de variables.

<DateTime>

En esta página