# vue: URL: https://generaltranslation.com/es/docs/vue/reference/components/datetime.mdx --- title: "" description: Formatea una fecha u hora según la configuración regional activa. Referencia de la API del componente . --- El componente `` formatea un `value` obligatorio de tipo fecha u hora con `Intl.DateTimeFormat`. Úsalo por sí solo o como una variable de entorno de ejecución dentro de [``](/docs/vue/reference/components/t). ## Descripción general [#overview] Vincula una `Date`, un número de milisegundos desde la época o una cadena de fecha mediante `value`: ```vue ``` El formateo se realiza localmente. El valor no se incluye en el contenido de origen de la traducción enriquecida. ## Cómo funciona [#how-it-works] * Un `Date` se formatea directamente. Los números y las cadenas se pasan primero al constructor `Date` de JavaScript. * `null` y las cadenas que solo contienen espacios en blanco se muestran vacíos. Las cadenas de fecha no válidas se muestran sin modificar. * El análisis de cadenas de fecha y las zonas horarias predeterminadas dependen del entorno de ejecución de JavaScript. Usa una marca de tiempo inequívoca y configura `timeZone` cuando la salida deba coincidir en todos los entornos. * Se ignoran los elementos secundarios del formateador. Proporciona siempre `value` y usa una etiqueta de cierre automático. * El componente no añade ningún contenedor HTML. ### Resolución de la configuración regional Cuando la configuración regional activa coincide con la configuración regional predeterminada, el formateo usa únicamente esta última e ignora `locales`. Con cualquier otra configuración regional activa, un formateador independiente prueba primero las `locales` explícitas, luego la configuración regional activa y, por último, la configuración regional predeterminada. Dentro de [``](/docs/vue/reference/components/t), el contenido alternativo de origen usa la configuración regional predeterminada. El contenido traducido prueba la configuración regional activa y luego la predeterminada, e ignora una prop `locales` explícita. ## Props [#props] | Prop | Descripción | Tipo | Opcional | Predeterminado | | --------------------- | ------------------------------------------------- | ---------------------------------- | -------- | ------------------------------------------------- | | [`value`](#value) | Valor con formato de fecha que se va a formatear. | `Date \| number \| string \| null` | No | — | | [`options`](#options) | Opciones que se pasan a `Intl.DateTimeFormat`. | `Intl.DateTimeFormatOptions` | Sí | `{}` | | [`locales`](#locales) | Locales preferidos para el formato. | `string[]` | Sí | Orden de resolución de configuraciones regionales | ### `value` **Tipo** `Date | number | string | null` · **Obligatorio** El valor que se va a formatear. Un número representa los milisegundos transcurridos desde la época Unix. Al pasar una cadena, usa preferiblemente una marca de tiempo ISO 8601, ya que otros formatos de fecha pueden interpretarse de forma distinta según el entorno de ejecución. ### `options` **Tipo** `Intl.DateTimeFormatOptions` · **Opcional** · **Predeterminado** `{}` Opciones que se pasan a la implementación de `Intl.DateTimeFormat` del entorno de ejecución de JavaScript. Entre las opciones habituales se incluyen: | Opción | Descripción | Tipo | Opcional | Predeterminado | | ------------------------ | ---------------------------------------------------------------- | --------------------------------------------------------- | -------- | ------------------------------------ | | `localeMatcher` | Algoritmo de coincidencia de configuraciones regionales. | `'lookup' \| 'best fit'` | Sí | `'best fit'` | | `calendar` | Sistema de calendario, como `gregory` o `japanese`. | `string` | Sí | Depende de la configuración regional | | `numberingSystem` | Sistema de numeración, como `latn` o `arab`. | `string` | Sí | Depende de la configuración regional | | `timeZone` | Nombre de zona horaria de IANA, como `UTC` o `America/New_York`. | `string` | Sí | Zona horaria del entorno de ejecución | | `dateStyle` | Formato preajustado de la fecha. | `'full' \| 'long' \| 'medium' \| 'short'` | Sí | — | | `timeStyle` | Formato preajustado de la hora. | `'full' \| 'long' \| 'medium' \| 'short'` | Sí | — | | `hour12` | Indica si se usa un reloj de 12 horas. | `boolean` | Sí | Depende de la configuración regional | | `hourCycle` | Ciclo horario. | `'h11' \| 'h12' \| 'h23' \| 'h24'` | Sí | Depende de la configuración regional | | `weekday` | Longitud del día de la semana. | `'long' \| 'short' \| 'narrow'` | Sí | — | | `era` | Longitud de la era. | `'long' \| 'short' \| 'narrow'` | Sí | — | | `year` | Visualización del año. | `'numeric' \| '2-digit'` | Sí | — | | `month` | Visualización del mes. | `'numeric' \| '2-digit' \| 'long' \| 'short' \| 'narrow'` | Sí | — | | `day` | Visualización del día. | `'numeric' \| '2-digit'` | Sí | — | | `hour` | Visualización de la hora. | `'numeric' \| '2-digit'` | Sí | — | | `minute` | Visualización de los minutos. | `'numeric' \| '2-digit'` | Sí | — | | `second` | Visualización de los segundos. | `'numeric' \| '2-digit'` | Sí | — | | `fractionalSecondDigits` | Precisión de los segundos fraccionarios. | `1 \| 2 \| 3` | Sí | — | | `timeZoneName` | Formato de la etiqueta de zona horaria. | `string` | Sí | — | No combines `dateStyle` ni `timeStyle` con campos individuales de fecha y hora en entornos de ejecución que rechacen esa combinación. Consulta las [opciones de `Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) para ver el conjunto completo de opciones definido por el entorno de ejecución. ### `locales` **Tipo** `string[]` · **Opcional** · **Predeterminado** Orden de resolución de configuraciones regionales Códigos BCP 47 de configuración regional preferidos para el formateo independiente. Se prueban antes que las configuraciones regionales activa y predeterminada, pero solo cuando la configuración regional activa no es la predeterminada configurada. ## Ejemplos [#examples] ```vue title="PublishedAt.vue" ``` ## Renderizado en el servidor [#ssr] Los entornos del servidor y del cliente pueden elegir configuraciones regionales o zonas horarias predeterminadas diferentes. Esto genera cadenas distintas durante la hidratación. Configura la misma configuración regional explícita en ambos plugins de [`createGT()`](/docs/vue/reference/functions/create-gt) y fija la zona horaria del formateador: ```vue ``` Precarga el mismo catálogo de la configuración regional antes del renderizado en el servidor y la hidratación en el cliente. Cuando la configuración regional activa coincida con la predeterminada configurada, ten en cuenta que el componente ignora intencionadamente su lista explícita de `locales` y formatea con dicha configuración predeterminada.