# General Translation React SDKs (gt-react, gt-next): DateTime
URL: https://generaltranslation.com/es/docs/react/reference/components/datetime.mdx
---

title: DateTime
description: Da formato a una fecha y hora para la configuración regional activa con General Translation gt-react. Referencia de la API de DateTime.

---

El componente `<DateTime>` renderiza una fecha o una hora con el formato de la configuración regional activa. Admite opciones de formato personalizadas y anulaciones de la configuración regional.

*Disponible en `gt-react`, `gt-next`, `gt-tanstack-start` y `gt-react-native`. Los ejemplos importan desde `gt-react`; en su lugar, importa desde el paquete de tu framework.*

## Descripción general [#overview]

Pasa un `Date` como children y `<DateTime>` lo formatea según la configuración regional activa.

```tsx
<DateTime>{new Date(1738010355000)}</DateTime>
// Salida: 1/27/2025
```

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

*Nota: `<DateTime>` puede provocar errores de hidratación de React en aplicaciones renderizadas en el servidor. Consulta [Cómo evitar errores de hidratación](#hydration).*

## Cómo funciona [#how-it-works]

* **Formato local.** La fecha se formatea en el navegador con `Intl.DateTimeFormat`. Su valor nunca se envía a la API de General Translation.
* **Resolución de la configuración regional.** La configuración regional activa determina el formato, salvo que se sobrescriba con `locales`.
* **La zona horaria importa.** Sin una `timeZone` explícita, el resultado depende de la zona del entorno de ejecución, que puede diferir entre el servidor y el cliente.

## Props [#props]

| Prop                    | Descripción                                          | Type                         | Opcional | Predeterminado                |
| ----------------------- | ---------------------------------------------------- | ---------------------------- | -------- | ----------------------------- |
| [`children`](#children) | La fecha que se va a formatear.                      | `Date`                       | No       | —                             |
| [`options`](#options)   | Opciones de `Intl.DateTimeFormat`.                   | `Intl.DateTimeFormatOptions` | Sí       | `{}`                          |
| [`locales`](#locales)   | Configuración regional para sobrescribir el formato. | `string[]`                   | Sí       | Configuración regional activa |
| [`name`](#name)         | Nombre de la variable para la entrada.               | `string`                     | Sí       | —                             |

### `children` [#children]

**Tipo** `Date` · **Obligatorio**

La fecha u hora que se va a formatear, como un objeto `Date`.

### `options` [#options]

**Tipo** `Intl.DateTimeFormatOptions` · **Opcional** · **Predeterminado** `{}`

Opciones de formato conforme a la especificación [`Intl.DateTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat), como `dateStyle`, `timeStyle` y `timeZone`.

### `locales` [#locales]

**Tipo** `string[]` · **Opcional** · **Predeterminado** Configuración regional activa

Configuraciones regionales que se usarán para dar formato. Si se omite, se usa la configuración regional activa. Consulta el [argumento locales](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument).

### `name` [#name]

**Tipo** `string` · **Opcional**

Un nombre opcional para el campo de fecha, que se usa como metadato.

## Ejemplos [#examples]

```tsx title="EventDate.tsx"
import { DateTime } from 'gt-react';

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

```tsx title="EventDate.tsx"
import { DateTime } from 'gt-react';

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

```tsx title="EventDate.tsx"
import { T, DateTime } from 'gt-react';

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

```tsx title="EventDate.tsx"
import { DateTime } from 'gt-react';

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

## Cómo evitar errores de hidratación [#hydration]

Como `<DateTime>` da formato a las fechas localmente, puede generar una salida distinta 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 mientras que el navegador usa la hora local, por lo que una marca de tiempo puede renderizarse como `"1/27/2025"` en el servidor y como `"1/28/2025"` en el cliente.
* **La configuración regional predeterminada es distinta entre entornos.** Si la configuración regional predeterminada no coincide, se generan cadenas diferentes (por ejemplo, `"27/01/2025"` frente a `"1/27/2025"`).

Fija tanto la configuración regional como la zona horaria para que el servidor y el cliente siempre generen la misma cadena:

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