# 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 para el componente DateTime
---

{/* GENERADO AUTOMÁTICAMENTE: No edites esto directamente. 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 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 maneja de forma local mediante 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

| Prop Name  | Descripción                                                                                                                                                                                                                                                                                                |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | El contenido que se renderiza dentro del componente. Normalmente, una 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`  | `locales` opcionales para especificar la configuración regional de 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 u hora formateada como cadena.

***

## Ejemplos

### Uso básico

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

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

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

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>` con 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>.
    );
}
```

***


## 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 el formato.

## Próximos pasos

* Para obtener 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 componentes de variable](/docs/react/guides/variables).