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

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


## Descripción general

El componente `<DateTime>` muestra una cadena de fecha u hora con formato y admite personalización, como opciones de formato y configuración regional.
La fecha u hora se formatea según la configuración regional actual y los parámetros opcionales que se pasen.

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

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

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

## Referencia

### Propiedades

<TypeTable
  type={{
  "children?": {
      description: 'Contenido de fecha que se 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 u hora. Puede ser una cadena, un número (marca de tiempo) o un objeto `Date`.                                                                                                                                                                                                         |
| `options`         | Opciones de formato opcionales para la fecha u hora, según la especificación de [`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 del formato. Si no se proporcionan, se usa la configuración regional del usuario. Lee más sobre cómo especificar `locales` [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 formateada como cadena.

***

## Ejemplos

### Uso básico

El componente `<DateTime>` puede usarse para mostrar valores de fecha u hora localizados.

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

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


### Especificar configuraciones regionales

El componente `<DateTime>` puede usarse para mostrar valores de fecha o de hora en una configuración regional específica.

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

import { DateTime } from 'gt-react';

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 aparezcan en una oración que también se está traduciendo.
Puedes envolver el componente `<DateTime>` en un componente `<T>`.

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

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

```jsx title="EventDate.jsx" copy
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>.
    );
}
```

***


## 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 una `timeZone` explícita.** El servidor puede ejecutarse en UTC (u 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 difieren.
* **La configuración regional predeterminada es distinta entre entornos.** Si la configuración regional predeterminada del servidor no coincide con la del cliente, la cadena formateada puede variar (por ejemplo, `"27/01/2025"` frente a `"1/27/2025"`).

### Cómo solucionarlo

**Define un `timeZone` explícito en `options`** para garantizar un resultado uniforme:

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

**Especifica `locales` de forma explícita** para evitar desajustes 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 formateada.


## Notas

* El componente `<DateTime>` es un componente de variable que se puede usar 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 aplicar el formato.

## Siguientes pasos

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