# react-native: DateTime
URL: https://generaltranslation.com/es/docs/react-native/api/components/datetime.mdx
---
title: DateTime
description: Referencia de API del componente DateTime
---

{/* GENERADO AUTOMÁTICAMENTE: No edites esto directamente. En su lugar, edita el template en content/docs-templates/. */}


## Descripción general

El componente `<DateTime>` muestra una cadena de fecha u hora con formato y permite personalizar opciones como el 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 pasen.

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

Todo el formato se realiza 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 hidratación de React** en aplicaciones renderizadas en el servidor. Consulta [Cómo evitar errores de hidratación](#avoiding-hydration-errors) a continuación.
</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. Por lo general, 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 (marca de tiempo) o un objeto `Date`.                                                                                                                                                                                                                                   |
| `options`         | Opciones de formato opcionales para la fecha u hora, según la [especificación `Intl.DateTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat). Úsalas 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 usada para el formato. Si no se proporciona, se usa la configuración regional del usuario. Lee más 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 formato de cadena.

***

## Ejemplos

### Uso básico

El componente `<DateTime>` puede usarse para mostrar valores de fecha u hora adaptados a la configuración regional.

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

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 u hora en una configuración regional concreta.

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

import { DateTime } from 'gt-react-native';

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 frase 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-native';

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-native';

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

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 ningún `timeZone` explícito.** 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 son distintas.
* **La configuración regional predeterminada difiere entre entornos.** Si la configuración regional predeterminada del servidor no coincide con la del cliente, el texto formateado puede variar (p. ej., `"27/01/2025"` frente a `"1/27/2025"`).

### Cómo solucionarlo

**Establece un `timeZone` explícito en `options`** para garantizar una salida coherente:

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

**Especifica `locales` de forma explícita** para evitar discrepancias en la 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 producirán la misma cadena formateada.


## 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 otros componente de variable, como `<Currency>`, `<Num>` y `<Var>`, consulta la documentación [Uso de componentes de variable](/docs/react-native/guides/variables).