# Vue: `<DateTime>`
URL: https://generaltranslation.com/it/docs/vue/reference/components/datetime.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Formatta una data o un orario in base all'impostazione regionale attiva. Riferimento API per il componente `<DateTime>`.

Il componente `<DateTime>` formatta un `value` obbligatorio di tipo data con `Intl.DateTimeFormat`. Usalo da solo o come variabile in fase di runtime all&#39;interno di [`<T>`](/docs/vue/reference/components/t).

## Panoramica [#overview]

Associa un oggetto `Date`, un numero di millisecondi dall&#39;epoca o una stringa di data tramite `value`:

```vue
<DateTime
  :value="publishedAt"
  :options="{ dateStyle: 'medium', timeZone: 'UTC' }"
/>
```

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&#39;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&#39;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&#39;impostazione regionale

Quando l&#39;impostazione regionale attiva coincide con quella predefinita configurata, la formattazione usa solo quest&#39;ultima e ignora `locales`. Per qualsiasi altra impostazione regionale attiva, un formattatore autonomo prova prima le `locales` esplicite, poi l&#39;impostazione regionale attiva e infine quella predefinita.

All&#39;interno di [`<T>`](/docs/vue/reference/components/t), il contenuto di fallback sorgente usa l&#39;impostazione regionale predefinita. Il contenuto tradotto prova l&#39;impostazione regionale attiva e poi quella predefinita, mentre un&#39;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&#39;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&#39;implementazione di `Intl.DateTimeFormat` del runtime JavaScript. Tra le opzioni più comuni:

| Opzione                  | Descrizione                                                                                                | Tipo                                                                                    | Facoltativo | Predefinito                             |
| ------------------------ | ---------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | ----------- | --------------------------------------- |
| `localeMatcher`          | Algoritmo di corrispondenza dell&#39;impostazione regionale.                                               | `'lookup' \| 'best fit'`                                                                | Sì          | `'best fit'`                            |
| `calendar`               | Sistema di calendario, ad esempio `gregory` o `japanese`.                                                  | `string`                                                                                | Sì          | Dipende dall&#39;impostazione regionale |
| `numberingSystem`        | Sistema di numerazione, ad esempio `latn` o `arab`.                                                        | `string`                                                                                | Sì          | Dipende dall&#39;impostazione regionale |
| `timeZone`               | Nome del fuso orario IANA, ad esempio `UTC` o `America/New_York`.                                          | `string`                                                                                | Sì          | Fuso orario del runtime                 |
| `formatMatcher`          | Algoritmo utilizzato per selezionare un formato di data e ora.                                             | `'basic' \| 'best fit'`                                                                 | Sì          | `'best fit'`                            |
| `dateStyle`              | Formato predefinito della data.                                                                            | `'full' \| 'long' \| 'medium' \| 'short'`                                               | Sì          | —                                       |
| `timeStyle`              | Formato predefinito dell&#39;ora.                                                                          | `'full' \| 'long' \| 'medium' \| 'short'`                                               | Sì          | —                                       |
| `hour12`                 | Indica se utilizzare il formato a 12 ore.                                                                  | `boolean`                                                                               | Sì          | Dipende dall&#39;impostazione regionale |
| `hourCycle`              | Ciclo orario.                                                                                              | `'h11' \| 'h12' \| 'h23' \| 'h24'`                                                      | Sì          | Dipende dall&#39;impostazione regionale |
| `weekday`                | Formato del giorno della settimana.                                                                        | `'long' \| 'short' \| 'narrow'`                                                         | Sì          | —                                       |
| `era`                    | Formato dell&#39;era.                                                                                      | `'long' \| 'short' \| 'narrow'`                                                         | Sì          | —                                       |
| `year`                   | Visualizzazione dell&#39;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&#39;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ì          | —                                       |
| `dayPeriod`              | Formato del periodo del giorno, ad esempio AM/PM o espressioni specifiche dell&#39;impostazione regionale. | `'narrow' \| 'short' \| 'long'`                                                         | Sì          | —                                       |
| `timeZoneName`           | Formato dell&#39;etichetta del fuso orario.                                                                | `'short' \| 'long' \| 'shortOffset' \| 'longOffset' \| 'shortGeneric' \| 'longGeneric'` | 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&#39;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&#39;impostazione regionale attiva non corrisponde a quella predefinita configurata.

## Esempi [#examples]

```vue title="PublishedAt.vue"
<script setup lang="ts">
import { DateTime, T } from 'gt-vue';

defineProps<{ publishedAt: Date }>();
</script>

<template>
  <T>
    Published
    <DateTime
      :value="publishedAt"
      :options="{ dateStyle: 'long', timeZone: 'UTC' }"
    />.
  </T>
</template>
```

## Rendering lato server [#ssr]

Gli ambienti server e client possono scegliere impostazioni regionali o fusi orari predefiniti diversi. Ciò produce stringhe diverse durante l&#39;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
<DateTime
  :value="publishedAt"
  :locales="['en-US']"
  :options="{ dateStyle: 'medium', timeZone: 'UTC' }"
/>
```

Precarica lo stesso catalogo dell&#39;impostazione regionale prima del rendering lato server e dell&#39;idratazione lato client. Quando l&#39;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.

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.
