# vue: URL: https://generaltranslation.com/it/docs/vue/reference/components/datetime.mdx --- title: "" description: Formatta una data o un orario in base all'impostazione regionale attiva. Riferimento API per il componente . --- Il componente `` formatta un `value` obbligatorio di tipo data con `Intl.DateTimeFormat`. Usalo da solo o come variabile in fase di runtime all'interno di [``](/docs/vue/reference/components/t). ## Panoramica [#overview] Associa un oggetto `Date`, un numero di millisecondi dall'epoca o una stringa di data tramite `value`: ```vue ``` La formattazione avviene localmente. Il valore non è incluso nel testo sorgente della traduzione avanzata. ## Come funziona [#how-it-works] * Un oggetto `Date` viene formattato direttamente. Numeri e stringhe vengono prima passati al costruttore JavaScript `Date`. * `null` e le stringhe composte solo da spazi bianchi renderizzano una stringa vuota. Una stringa di data non valida viene renderizzata senza modifiche. * L'analisi delle stringhe di data e i fusi orari predefiniti sono gestiti dal runtime JavaScript. Usa un timestamp non ambiguo e imposta `timeZone` quando l'output deve essere identico nei diversi ambienti. * Il contenuto figlio dello slot del formattatore viene ignorato. Fornisci sempre `value` e usa un tag autochiudente. * Il componente non aggiunge alcun wrapper HTML. ### Risoluzione dell'impostazione regionale Quando l'impostazione regionale attiva coincide con quella predefinita configurata, la formattazione usa solo quest'ultima e ignora `locales`. Per qualsiasi altra impostazione regionale attiva, un formattatore autonomo prova prima le `locales` esplicite, poi l'impostazione regionale attiva e infine quella predefinita. All'interno di [``](/docs/vue/reference/components/t), il contenuto di fallback sorgente usa l'impostazione regionale predefinita. Il contenuto tradotto prova l'impostazione regionale attiva e poi quella predefinita, mentre un'eventuale prop `locales` esplicita viene ignorata. ## Props [#props] | Prop | Descrizione | Tipo | Facoltativo | Predefinito | | --------------------- | ------------------------------------------------------ | ---------------------------------- | ----------- | -------------------------------------------------- | | [`value`](#value) | Valore di tipo data da formattare. | `Date \| number \| string \| null` | No | — | | [`options`](#options) | Opzioni passate a `Intl.DateTimeFormat`. | `Intl.DateTimeFormatOptions` | Sì | `{}` | | [`locales`](#locales) | Impostazioni regionali preferite per la formattazione. | `string[]` | Sì | Ordine di risoluzione delle impostazioni regionali | ### `value` **Tipo** `Date | number | string | null` · **Obbligatorio** Il valore da formattare. Un numero rappresenta i millisecondi dall'epoca Unix. Quando passi una stringa, usa preferibilmente un timestamp ISO 8601, poiché altri formati di data potrebbero essere interpretati in modo diverso nei vari runtime. ### `options` **Tipo** `Intl.DateTimeFormatOptions` · **Facoltativo** · **Predefinito** `{}` Opzioni passate all'implementazione di `Intl.DateTimeFormat` del runtime JavaScript. Tra le opzioni più comuni: | Opzione | Descrizione | Tipo | Facoltativo | Predefinito | | ------------------------ | ----------------------------------------------------------------- | --------------------------------------------------------- | ----------- | --------------------------------------- | | `localeMatcher` | Algoritmo di corrispondenza dell'impostazione regionale. | `'lookup' \| 'best fit'` | Sì | `'best fit'` | | `calendar` | Sistema di calendario, ad esempio `gregory` o `japanese`. | `string` | Sì | Dipende dall'impostazione regionale | | `numberingSystem` | Sistema di numerazione, ad esempio `latn` o `arab`. | `string` | Sì | Dipende dall'impostazione regionale | | `timeZone` | Nome del fuso orario IANA, ad esempio `UTC` o `America/New_York`. | `string` | Sì | Fuso orario del runtime | | `dateStyle` | Formato predefinito della data. | `'full' \| 'long' \| 'medium' \| 'short'` | Sì | — | | `timeStyle` | Formato predefinito dell'ora. | `'full' \| 'long' \| 'medium' \| 'short'` | Sì | — | | `hour12` | Indica se utilizzare il formato a 12 ore. | `boolean` | Sì | Dipende dall'impostazione regionale | | `hourCycle` | Ciclo orario. | `'h11' \| 'h12' \| 'h23' \| 'h24'` | Sì | Dipende dall'impostazione regionale | | `weekday` | Formato del giorno della settimana. | `'long' \| 'short' \| 'narrow'` | Sì | — | | `era` | Formato dell'era. | `'long' \| 'short' \| 'narrow'` | Sì | — | | `year` | Visualizzazione dell'anno. | `'numeric' \| '2-digit'` | Sì | — | | `month` | Visualizzazione del mese. | `'numeric' \| '2-digit' \| 'long' \| 'short' \| 'narrow'` | Sì | — | | `day` | Visualizzazione del giorno. | `'numeric' \| '2-digit'` | Sì | — | | `hour` | Visualizzazione dell'ora. | `'numeric' \| '2-digit'` | Sì | — | | `minute` | Visualizzazione dei minuti. | `'numeric' \| '2-digit'` | Sì | — | | `second` | Visualizzazione dei secondi. | `'numeric' \| '2-digit'` | Sì | — | | `fractionalSecondDigits` | Precisione dei secondi frazionari. | `1 \| 2 \| 3` | Sì | — | | `timeZoneName` | Formato dell'etichetta del fuso orario. | `string` | Sì | — | Non combinare `dateStyle` o `timeStyle` con singoli campi di data e ora nei runtime che non supportano questa combinazione. Consulta le [opzioni di `Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) per l'elenco completo definito dal runtime. ### `locales` **Tipo** `string[]` · **Facoltativo** · **Predefinito** Ordine di risoluzione delle impostazioni regionali Codici locale BCP 47 preferiti per la formattazione autonoma. Vengono utilizzati prima delle impostazioni regionali attiva e predefinita solo se l'impostazione regionale attiva non corrisponde a quella predefinita configurata. ## Esempi [#examples] ```vue title="PublishedAt.vue" ``` ## Rendering lato server [#ssr] Gli ambienti server e client possono scegliere impostazioni regionali o fusi orari predefiniti diversi. Ciò produce stringhe diverse durante l'idratazione. Configura la stessa impostazione regionale esplicita in entrambi i plugin [`createGT()`](/docs/vue/reference/functions/create-gt) e fissa il fuso orario del formattatore: ```vue ``` Precarica lo stesso catalogo dell'impostazione regionale prima del rendering lato server e dell'idratazione lato client. Quando l'impostazione regionale attiva corrisponde a quella predefinita configurata, tieni presente che il componente ignora intenzionalmente il proprio elenco esplicito di `locales` e formatta usando tale valore predefinito.