# vue: URL: https://generaltranslation.com/fr/docs/vue/reference/components/datetime.mdx --- title: "" description: Formate une date ou une heure selon le paramètre régional actif. Référence de l’API du composant . --- Le composant `` formate une `value` obligatoire de type date avec `Intl.DateTimeFormat`. Utilisez-le seul ou comme variable d’exécution dans [``](/docs/vue/reference/components/t). ## Vue d’ensemble [#overview] Associez une `Date`, un nombre de millisecondes depuis l’époque Unix ou une chaîne de date via `value` : ```vue ``` Le formatage s’effectue localement. La valeur n’est pas incluse dans la source de traduction riche. ## Fonctionnement [#how-it-works] * Un objet `Date` est formaté directement. Les nombres et les chaînes sont d’abord transmis au constructeur JavaScript `Date`. * `null` et les chaînes composées uniquement d’espaces affichent une valeur vide. Une chaîne de date non valide s’affiche telle quelle. * L’analyse des chaînes de date et les fuseaux horaires par défaut sont fournis par l’environnement d’exécution JavaScript. Utilisez un horodatage non ambigu et définissez `timeZone` lorsque la sortie doit être identique dans tous les environnements. * Les éléments enfants du slot du formateur sont ignorés. Fournissez toujours `value` et utilisez une balise autofermante. * Le composant n’ajoute aucun conteneur HTML. ### Résolution de paramètre régional Lorsque le paramètre régional actif correspond au paramètre régional par défaut configuré, le formatage utilise uniquement ce dernier et ignore `locales`. Pour tout autre paramètre régional actif, un formateur autonome essaie d’abord les `locales` explicites, puis le paramètre régional actif et enfin le paramètre régional par défaut. Dans [``](/docs/vue/reference/components/t), le contenu source de secours utilise le paramètre régional par défaut. Le contenu traduit essaie le paramètre régional actif, puis le paramètre régional par défaut, et toute prop `locales` explicite est ignorée. ## Props [#props] | Prop | Description | Type | Facultatif | Par défaut | | --------------------- | ---------------------------------------------- | ---------------------------------- | ---------- | -------------------------------------------- | | [`value`](#value) | Valeur de type date à formater. | `Date \| number \| string \| null` | Non | — | | [`options`](#options) | Options transmises à `Intl.DateTimeFormat`. | `Intl.DateTimeFormatOptions` | Oui | `{}` | | [`locales`](#locales) | Paramètres régionaux de formatage privilégiés. | `string[]` | Oui | Ordre de résolution des paramètres régionaux | ### `value` **Type** `Date | number | string | null` · **Obligatoire** La valeur à mettre en forme. Un nombre représente les millisecondes écoulées depuis l’époque Unix. Lorsque vous transmettez une chaîne, privilégiez un horodatage ISO 8601, car les autres formats de date peuvent être interprétés différemment selon l’environnement d’exécution. ### `options` **Type** `Intl.DateTimeFormatOptions` · **Facultatif** · **Par défaut** `{}` Options transmises à l’implémentation `Intl.DateTimeFormat` de l’environnement d’exécution JavaScript. Les options courantes sont les suivantes : | Option | Description | Type | Facultatif | Par défaut | | ------------------------ | ---------------------------------------------------------------- | --------------------------------------------------------- | ---------- | --------------------------------------------- | | `localeMatcher` | Algorithme de correspondance des paramètres régionaux. | `'lookup' \| 'best fit'` | Oui | `'best fit'` | | `calendar` | Système de calendrier, tel que `gregory` ou `japanese`. | `string` | Oui | Dépend du paramètre régional | | `numberingSystem` | Système de numérotation, tel que `latn` ou `arab`. | `string` | Oui | Dépend du paramètre régional | | `timeZone` | Nom de fuseau horaire IANA, tel que `UTC` ou `America/New_York`. | `string` | Oui | Fuseau horaire de l’environnement d’exécution | | `dateStyle` | Format de date prédéfini. | `'full' \| 'long' \| 'medium' \| 'short'` | Oui | — | | `timeStyle` | Format d’heure prédéfini. | `'full' \| 'long' \| 'medium' \| 'short'` | Oui | — | | `hour12` | Indique s’il faut utiliser le format sur 12 heures. | `boolean` | Oui | Dépend du paramètre régional | | `hourCycle` | Cycle horaire. | `'h11' \| 'h12' \| 'h23' \| 'h24'` | Oui | Dépend du paramètre régional | | `weekday` | Format du jour de la semaine. | `'long' \| 'short' \| 'narrow'` | Oui | — | | `era` | Format de l’ère. | `'long' \| 'short' \| 'narrow'` | Oui | — | | `year` | Affichage de l’année. | `'numeric' \| '2-digit'` | Oui | — | | `month` | Affichage du mois. | `'numeric' \| '2-digit' \| 'long' \| 'short' \| 'narrow'` | Oui | — | | `day` | Affichage du jour. | `'numeric' \| '2-digit'` | Oui | — | | `hour` | Affichage de l’heure. | `'numeric' \| '2-digit'` | Oui | — | | `minute` | Affichage des minutes. | `'numeric' \| '2-digit'` | Oui | — | | `second` | Affichage des secondes. | `'numeric' \| '2-digit'` | Oui | — | | `fractionalSecondDigits` | Précision des fractions de seconde. | `1 \| 2 \| 3` | Oui | — | | `timeZoneName` | Format du libellé de fuseau horaire. | `string` | Oui | — | Ne combinez pas `dateStyle` ou `timeStyle` avec des champs de date et d’heure individuels dans les environnements d’exécution qui rejettent cette combinaison. Consultez les [options de `Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) pour connaître l’ensemble complet des options définies par l’environnement d’exécution. ### `locales` **Type** `string[]` · **Facultatif** · **Par défaut** Ordre de résolution des paramètres régionaux Codes de langue BCP 47 privilégiés pour le formatage autonome. Ils sont utilisés avant les paramètres régionaux actif et par défaut uniquement lorsque le paramètre régional actif n’est pas celui configuré par défaut. ## Exemples [#examples] ```vue title="PublishedAt.vue" ``` ## Rendu côté serveur [#ssr] Les environnements serveur et client peuvent utiliser des paramètres régionaux ou des fuseaux horaires par défaut différents. Cela génère des chaînes différentes lors de l’hydratation. Configurez le même paramètre régional explicite dans les deux plugins [`createGT()`](/docs/vue/reference/functions/create-gt) et fixez le fuseau horaire du formateur : ```vue ``` Préchargez le même catalogue de paramètres régionaux avant le rendu côté serveur et l’hydratation côté client. Lorsque le paramètre régional actif correspond à la valeur par défaut configurée, gardez à l’esprit que le composant ignore délibérément sa liste `locales` explicite et utilise cette valeur par défaut pour le formatage.