Formateo de fecha y hora

Uso básico

Puede localizar la fecha y hora con sus definiciones de formato.

El formato de fecha y hora se muestra a continuación:

const datetimeFormats = {
  'en-US': {
    short: {
      year: 'numeric', month: 'short', day: 'numeric'
    },
    long: {
      year: 'numeric', month: 'short', day: 'numeric',
      weekday: 'short', hour: 'numeric', minute: 'numeric'
    }
  },
  'ja-JP': {
    short: {
      year: 'numeric', month: 'short', day: 'numeric'
    },
    long: {
      year: 'numeric', month: 'short', day: 'numeric',
      weekday: 'short', hour: 'numeric', minute: 'numeric', hour12: true
    }
  }
}

Como se muestra arriba, puede definir un formato de fecha y hora con nombre (por ejemplo short, long, etc.), y necesita usar las opciones con ECMA-402 Intl.DateTimeFormat

Después de eso, al utilizar los mensajes de configuración regional, debe especificar la opción datetimeFormats de createI18n:

const i18n = createI18n({
  datetimeFormats
})

Para localizar un valor de fecha y hora con Vue I18n, use $d.

NOTE

Tenga en cuenta que el nombre de la opción es datetimeFormats en VueI18n v9, no dateTimeFormats. Para obtener más detalles visite la guía de migración

TIP

$d tiene múltiples sobrecargas. Puede obtener más información en Referencia de la API

NOTE

Algunas formas de soportar la localización son:

• $d (para modo de API heredada y modo de API de composición)
• componente integrado DatetimeFormat (i18n-d)
• exportado d desde useI18n (para modo de API de composición)

A continuación se muestra un ejemplo del uso de $d en una plantilla:

<p>{{ $d(new Date(), 'short') }}</p>
<p>{{ $d(new Date(), 'long', 'ja-JP') }}</p>

El primer argumento es un valor apto para fecha y hora (por ejemplo Date, timestamp) como parámetro, y el segundo argumento es el nombre del formato de fecha y hora como parámetro. El último argumento es el valor de la configuración regional como parámetro.

Como resultado se obtiene lo siguiente:

<p>Apr 19, 2017</p>
<p>2017年4月19日(水) 午前2:19</p>

Formateo personalizado

$d devuelve una cadena con la fecha y hora totalmente formateada, que solo puede ser utilizada como un todo. En situaciones cuando necesite dar estilo a alguna parte de la fecha y hora formateada (por ejemplo dígitos fraccionarios), $d no es suficiente. En tales casos, el componente DatetimeFormat (i18n-d) será útil.

Con un conjunto mínimo de propiedades, i18n-d genera la misma salida que $d, envuelta en un elemento DOM configurado.

La siguiente plantilla:

<i18n-d tag="p" :value="new Date()"></i18n-d>
<i18n-d tag="p" :value="new Date()" format="long"></i18n-d>
<i18n-d tag="p" :value="new Date()" format="long" locale="ja-JP-u-ca-japanese"></i18n-d>

El componente DatetimeFormat tiene algunas props.

La propiedad tag es la propiedad para establecer la etiqueta.

La propiedad value es la propiedad para establecer el valor apto para fecha y hora a formatear.

La propiedad format es la propiedad a la cual se puede establecer el formato definido por la opción datetimeFormats de createI18n.

La propiedad locale es la propiedad para establecer la configuración regional. Se localiza con la configuración regional especificada por esta propiedad en lugar de la especificada con la opción locale de createI18n.

Producirá la siguiente salida:

<p>11/3/2020</p>
<p>11/03/2020, 02:35:31 AM</p>
<p>令和2年11月3日火曜日 午前2:35:31 日本標準時</p>

Pero el verdadero poder de este componente se manifiesta cuando se usa con slots con alcance.

Digamos que hay una necesidad de representar la parte de la era de la fecha y hora con una fuente más gruesa. Esto puede lograrse especificando el elemento de slot con alcance era:

<i18n-d tag="span" :value="new Date()" locale="ja-JP-u-ca-japanese" :format="{ key: 'long', era: 'narrow' }">
  <template #era="props">
    <span style="color: green">{{ props.era }}</span>
  </template>
</i18n-d>

La plantilla anterior producirá el siguiente HTML:

<span><span style="color: green;">R</span>2年11月3日火曜日 午前2:35:31 日本標準時</span>

Es posible especificar varios slots con alcance al mismo tiempo:

<i18n-d tag="span" :value="new Date()" locale="ja-JP-u-ca-japanese" :format="{ key: 'long', era: 'narrow' }">
  <template #era="props">
    <span style="color: green">{{ props.era }}</span>
  </template>
  <template #literal="props">
    <span style="color: green">{{ props.literal }}</span>
  </template>
</i18n-d>

(este HTML resultante fue formateado para una mejor legibilidad)

<span>
  <span style="color: green;">R</span>2
  <span style="color: green;">年</span>11
  <span style="color: green;">月</span>3
  <span style="color: green;">日</span>火曜日
  <span style="color: green;"> </span>午前3
  <span style="color: green;">:</span>09
  <span style="color: green;">:</span>56
  <span style="color: green;"> </span>日本標準時
</span>

NOTE

La lista completa de slots con alcance compatibles así como otras propiedades de i18n-d pueden encontrarse en Referencia de la API

Resolución de ámbito

La resolución de ámbito del componente DatetimeFormat es igual que la del componente Translation.

Vea aquí