Mise en forme des dates et heures

Utilisation de base

Vous pouvez localiser les dates et heures avec vos formats définis.

Les formats de date sont les suivants :

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
    }
  }
}

Comme indiqué ci-dessus, vous pouvez définir des formats de date nommés (par exemple short, long, etc.), et vous devez utiliser les options avec ECMA-402 Intl.DateTimeFormat

Ensuite, lors de l'utilisation des messages locaux, vous devez spécifier l'option datetimeFormats de createI18n :

const i18n = createI18n({
  datetimeFormats
})

Pour localiser une valeur de date et heure avec Vue I18n, utilisez $d.

NOTE

Notez que le nom de l'option est datetimeFormats dans VueI18n v9, et non dateTimeFormats. Pour en savoir plus, consultez le guide de migration

TIP

$d comporte plusieurs surcharges. Vous pouvez découvrir davantage d'informations dans la référence de l'API

NOTE

Quelques façons de supporter la localisation sont :

• $d (pour le mode Legacy API et le mode Composition API)
• composant intégré DatetimeFormat (i18n-d)
• d exporté depuis useI18n (pour le mode Composition API)

Voici un exemple d'utilisation de $d dans un template :

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

Le premier argument est la valeur de date et heure (par exemple Date, horodatage) en tant que paramètre, le deuxième argument est le nom du format de date en tant que paramètre. Le dernier argument est la valeur de la locale en tant que paramètre.

En résultat, cela donne :

<p>19 avr 2017</p>
<p>19 avril 2017 (mercredi) 2:19</p>

Mise en forme personnalisée

$d renvoie une chaîne de caractères avec la date et heure formatées complètement, qui ne peut être utilisée qu'en entier. Dans les situations où vous devez styliser une partie spécifique de la date et heure formatée (comme les décimales), $d n'est pas suffisant. Dans ce cas, le composant DatetimeFormat (i18n-d) peut vous aider.

Avec un ensemble minimal de propriétés, i18n-d génère le même résultat que $d, encapsulé dans un élément DOM configuré.

Le template suivant :

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

Le composant DatetimeFormat possède plusieurs props.

La propriété tag permet de définir la balise.

La propriété value est utilisée pour définir la valeur de date et heure à formater.

La propriété format est utilisée pour définir le format défini par l'option datetimeFormats de createI18n.

La propriété locale est utilisée pour définir la locale. Elle est localisée avec la locale spécifiée par cette propriété au lieu de celle spécifiée avec l'option locale de createI18n.

Cela produira la sortie suivante :

<p>3/11/2020</p>
<p>03/11/2020, 02:35:31 AM</p>
<p>2ème année Reiwa, 3 novembre 2020, mardi, 2:35:31 heure standard du Japon</p>

Mais la véritable puissance de ce composant apparaît quand il est utilisé avec les slots portés (scoped slots).

Disons qu'il y a un besoin d'afficher la partie « ère » de la date et heure avec une police plus épaisse. Cela peut être réalisé en spécifiant l'élément de slot porté 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>

Le template ci-dessus générera le HTML suivant :

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

Il est possible de spécifier plusieurs slots portés en même temps :

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

(cette sortie HTML a été formatée pour une meilleure lisibilité)

<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 liste complète des slots portés pris en charge ainsi que les autres propriétés de i18n-d peuvent être trouvées dans la référence de l'API

Résolution de portée

La résolution de portée du composant DatetimeFormat est identique à celle du composant Translation.

Voir ici