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

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


## Resumen

El componente `<DateTime>` renderiza una cadena de fecha u hora formateada y admite personalización, como opciones de formato y 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 maneja de forma local con la biblioteca [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat).


## Referencia

### Propiedades

<TypeTable
  type={{
  "children?": {
      description: 'Contenido de fecha que se va a 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 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). Úsalo 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 del formato. Si no se proporciona, 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 u hora formateada en forma de 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-native';

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


### Especificar locales

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

```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 mostrar la fecha y la hora en una oración que también se traduce.
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>.
    );
}
```

***


## 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 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 Variable](/docs/react-native/guides/variables).