# gt-next: General Translation Next.js SDK: DateTime
URL: https://generaltranslation.com/es/docs/next/api/components/datetime.mdx
---
title: DateTime
description: Referencia de la API del componente DateTime
---

{/* GENERADO AUTOMÁTICAMENTE: No lo edites directamente. Edita la plantilla en content/docs-templates/. */}


## Descripción general

El componente `<DateTime>` muestra una cadena de fecha u hora con formato y permite personalizarla mediante opciones de formato y la configuración regional.
La fecha o la hora se formatea según la configuración regional actual y los parámetros opcionales que se proporcionen.

```jsx
<DateTime>{1738010355}</DateTime>
// Salida: 1/27/2025
```

Todo el formato se maneja localmente con la biblioteca [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat).

<Callout type="warn">
  `<DateTime>` puede provocar **errores de hidratación de React** en aplicaciones renderizadas en el servidor. Consulta [Cómo evitar errores de hidratación](#avoiding-hydration-errors) más abajo.
</Callout>


## Referencia

### Propiedades

<TypeTable
  type={{
  "children?": {
      description: 'Contenido de fecha para formatear.',
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "name?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "value?": {
      type: 'string | number | Date',
      optional: true,
      default: 'undefined',
  },
  "options?": {
      type: 'Intl.DateTimeFormatOptions',
      optional: true,
      default: '{}',
  },
  "locales?": {
      type: 'string[]',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Descripción

| Nombre de la prop | Descripción                                                                                                                                                                                                                                                                                                                                                      |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children`        | El contenido que se renderiza dentro del componente. Normalmente, un valor de fecha u hora. Si se proporciona, tiene prioridad sobre la prop `value`.                                                                                                                                                                                                            |
| `value`           | El valor predeterminado para la fecha o la hora. Puede ser una cadena, un número (marca de tiempo) o un objeto `Date`.                                                                                                                                                                                                                                           |
| `options`         | Opciones de formato opcionales para la fecha o la hora, según la [especificación `Intl.DateTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat). Úsalo para definir estilos como nombres de días de la semana, zonas horarias y más.                                                        |
| `locales`         | Configuraciones regionales opcionales para especificar la configuración regional de formato. Si no se proporciona ninguna, se usa la configuración regional del usuario. Obtén más información sobre cómo especificar configuraciones regionales [aquí](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument). |

### Devuelve

`JSX.Element` que contiene la fecha o la hora con el formato aplicado, como una cadena.

***

## Ejemplos

### Uso básico

El componente `<DateTime>` se puede usar para mostrar valores de fecha u hora según la configuración regional.

```jsx title="EventDate.jsx" copy
import { DateTime } from 'gt-next';

export default function EventDate(event) {
    return (
        <DateTime> {event.date} </DateTime>. // [!code highlight]
    );
}
```


### Especificar configuraciones regionales

El componente `<DateTime>` puede utilizarse para mostrar fechas u horas en una configuración regional específica.

```jsx title="EventDate.jsx" copy

import { DateTime } from 'gt-next';

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


### Traducir DateTime

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

```jsx title="EventDate.jsx" copy
import { T, DateTime } from 'gt-next';

export default function EventDate(event) {
    return (
        <T id="eventDate">
            The time of the event is <DateTime> {event.date} </DateTime>. // [!code highlight]
        </T>
    );
}
```


### Formato personalizado

El componente `<DateTime>` permite opciones de formato personalizadas.

```jsx title="EventDate.jsx" copy
import { DateTime } from 'gt-next';

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

***


## Evitar errores de hidratación

Como `<DateTime>` formatea las fechas localmente con `Intl.DateTimeFormat`, puede producir **resultados distintos en el servidor y en el cliente**. Cuando React compara el HTML renderizado en el servidor con el renderizado en el cliente y no coinciden, se produce un error de hidratación.

Esto suele ocurrir cuando:

* **No se establece un `timeZone` explícito.** El servidor puede ejecutarse en UTC (o en otra zona), mientras que el navegador del usuario usa su zona horaria local. Una marca temporal como `1738010355` podría renderizarse como `"1/27/2025"` en el servidor, pero como `"1/28/2025"` en el cliente si las zonas horarias son distintas.
* **La configuración regional predeterminada difiere entre entornos.** Si la configuración regional predeterminada del servidor no coincide con la del cliente, la cadena formateada puede ser distinta (p. ej., `"27/01/2025"` frente a `"1/27/2025"`).

### Cómo solucionarlo

**Establece un `timeZone` explícito en `options`** para garantizar un resultado consistente:

```jsx
<DateTime options={{ timeZone: 'America/New_York' }}>
  {event.date}
</DateTime>
```

**Especifica `locales` de forma explícita** para evitar incompatibilidades de configuración regional:

```jsx
<DateTime locales={['en-US']} options={{ timeZone: 'UTC' }}>
  {event.date}
</DateTime>
```

Al fijar tanto la configuración regional como la zona horaria, el servidor y el cliente siempre generarán la misma cadena con formato.


## Notas

* El componente `<DateTime>` es un componente de variable que puede usarse para dar formato a valores de fecha y hora.
* El componente usa la biblioteca [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) para dar formato.

## Próximos pasos

* Para obtener más información y ejemplos de uso del componente `<DateTime>` y de otros componentes de variable como `<Currency>`, `<Num>` y `<Var>`, consulta la documentación [Uso de componentes de variable](/docs/next/guides/variables).