# General Translation React SDKs (gt-react, gt-next, gt-react-native): `` URL: https://generaltranslation.com/es/docs/react/reference/components/datetime.mdx Docs index: https://generaltranslation.com/llms.txt Description: Da formato a una fecha y hora para la configuración regional activa. Referencia de la API del componente ``. El componente `` muestra un valor `Date` como una fecha, una hora o ambas localizadas. 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`.* ## Descripción general [#overview] Pasa un `Date` como children y `` lo formatea según la configuración regional activa. ```tsx {new Date(1738010355000)} // 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: `` 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** `{}` La prop acepta [`Intl.DateTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options). Entre las opciones más comunes se incluyen: | Opción | Descripción | Tipo | Opcional | Predeterminado | | ------------------------ | ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | -------- | ---------------------------------------------------------- | | `localeMatcher` | Algoritmo de coincidencia de configuración regional. | `'lookup' \| 'best fit'` | Sí | `'best fit'` | | `calendar` | Sistema de calendario, como `gregory`, `chinese` o `persian`. | `string` | Sí | `'gregory'` | | `numberingSystem` | Sistema de numeración, como `latn` o `arab`. | `string` | Sí | `'latn'` | | `hour12` | Indica si se usa un reloj de 12 horas. Reemplaza `hourCycle`. | `boolean` | Sí | Depende de la configuración regional | | `hourCycle` | Ciclo horario utilizado por el reloj. | `'h11' \| 'h12' \| 'h23' \| 'h24'` | Sí | Depende de la configuración regional | | `timeZone` | Zona horaria IANA o desfase con respecto a UTC. | `string` | Sí | Zona horaria del entorno de ejecución | | `weekday` | Longitud del nombre del día de la semana. | `'long' \| 'short' \| 'narrow'` | Sí | — | | `era` | Longitud de la etiqueta de la era. | `'long' \| 'short' \| 'narrow'` | Sí | — | | `year` | Año numérico o de dos dígitos. | `'numeric' \| '2-digit'` | Sí | `'numeric'` cuando no se establecen estilos ni componentes | | `month` | Formato de mes numérico o con nombre. | `'numeric' \| '2-digit' \| 'long' \| 'short' \| 'narrow'` | Sí | `'numeric'` cuando no se establecen estilos ni componentes | | `day` | Día numérico o de dos dígitos. | `'numeric' \| '2-digit'` | Sí | `'numeric'` cuando no se establecen estilos ni componentes | | `dayPeriod` | Longitud de etiquetas como «por la mañana» o «por la noche». | `'long' \| 'short' \| 'narrow'` | Sí | — | | `hour` | Hora numérica o de dos dígitos. | `'numeric' \| '2-digit'` | Sí | — | | `minute` | Minuto numérico o de dos dígitos. | `'numeric' \| '2-digit'` | Sí | — | | `second` | Segundo numérico o de dos dígitos. | `'numeric' \| '2-digit'` | Sí | — | | `fractionalSecondDigits` | Número de dígitos de las fracciones de segundo. | `1 \| 2 \| 3` | Sí | — | | `timeZoneName` | Longitud y estilo de la etiqueta de zona horaria. | `'long' \| 'short' \| 'shortOffset' \| 'longOffset' \| 'shortGeneric' \| 'longGeneric'` | Sí | — | | `formatMatcher` | Algoritmo para hacer coincidir las opciones de componentes con un formato de configuración regional. | `'basic' \| 'best fit'` | Sí | `'best fit'` | | `dateStyle` | Preajuste de formato de fecha. | `'full' \| 'long' \| 'medium' \| 'short'` | Sí | — | | `timeStyle` | Preajuste de formato de hora. | `'full' \| 'long' \| 'medium' \| 'short'` | Sí | — | * `dateStyle` y `timeStyle` pueden usarse juntos, pero no con opciones de componentes como `weekday`, `year`, `month`, `day`, `hour`, `minute` o `second`. * `hour12` reemplaza `hourCycle`. * `dayPeriod` solo afecta a los formatos de reloj de 12 horas. * Los calendarios compatibles, los sistemas de numeración, las etiquetas de zona horaria y los valores de las opciones dependen del entorno de ejecución de JavaScript. Consulta la [documentación sobre las opciones de `Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) para conocer las opciones disponibles más recientes y el comportamiento del entorno de ejecución. ### `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] *Los ejemplos importan desde `gt-react`; en su lugar, importa desde el paquete de tu framework.* ```tsx title="EventDate.tsx" import { DateTime } from 'gt-react'; export default function EventDate({ event }) { return {event.date}; // [!code highlight] } ``` ```tsx title="EventDate.tsx" import { DateTime } from 'gt-react'; export default function EventDate({ event }) { return {event.date}; // [!code highlight] } ``` ```tsx title="EventDate.tsx" import { T, DateTime } from 'gt-react'; export default function EventDate({ event }) { return ( The time of the event is {event.date}. // [!code highlight] ); } ``` ```tsx title="EventDate.tsx" import { DateTime } from 'gt-react'; export default function EventDate({ event }) { return ( {event.date} ); } ``` ## Cómo evitar errores de hidratación [#hydration] Como `` 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 {event.date} ``` ## Sitemap See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.