# General Translation React SDKs (gt-react, gt-next, gt-react-native): `` URL: https://generaltranslation.com/it/docs/react/reference/components/datetime.mdx Docs index: https://generaltranslation.com/llms.txt Description: Formatta una data e un'ora per l'impostazione regionale attiva. Riferimento API per il componente ``. Il componente `` visualizza un valore `Date` come data, ora o entrambe localizzate. Supporta opzioni di formattazione personalizzate e consente di sovrascrivere l'impostazione regionale. *Disponibile in `gt-react`, `gt-next`, `gt-tanstack-start` e `gt-react-native`.* ## Panoramica [#overview] Passa un `Date` come contenuto figlio e `` lo formatta in base all'impostazione regionale attiva. ```tsx {new Date(1738010355000)} // Output: 27/1/2025 ``` Tutta la formattazione viene gestita localmente con [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat). *Nota: `` può causare errori di idratazione di React nelle app con rendering lato server. Vedi [Come evitare gli errori di idratazione](#hydration).* ## Come funziona [#how-it-works] * **Formattazione locale.** La data viene formattata nel browser con `Intl.DateTimeFormat`. Il suo valore non viene mai inviato all'API di General Translation. * **Determinazione dell'impostazione regionale.** L'impostazione regionale attiva determina la formattazione, a meno che non venga sovrascritta con `locales`. * **Il fuso orario conta.** Senza un `timeZone` esplicito, l'output dipende dal fuso orario dell'ambiente di esecuzione, che può differire tra server e client. ## Props [#props] | Prop | Descrizione | Type | Facoltativo | Predefinito | | ----------------------- | -------------------------------------------------------------- | ---------------------------- | ----------- | ----------------------------- | | [`children`](#children) | La data da formattare. | `Date` | No | — | | [`options`](#options) | Opzioni di `Intl.DateTimeFormat`. | `Intl.DateTimeFormatOptions` | Sì | `{}` | | [`locales`](#locales) | Sovrascrive l'impostazione regionale per la formattazione. | `string[]` | Sì | Impostazione regionale attiva | | [`name`](#name) | Nome della variabile per la voce. | `string` | Sì | — | ### `children` [#children] **Type** `Date` · **Obbligatorio** La data o l'ora da formattare, sotto forma di oggetto `Date`. ### `options` [#options] **Tipo** `Intl.DateTimeFormatOptions` · **Facoltativo** · **Predefinito** `{}` La prop accetta [`Intl.DateTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options). 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`, `chinese` o `persian`. | `string` | Sì | `'gregory'` | | `numberingSystem` | Sistema di numerazione, ad esempio `latn` o `arab`. | `string` | Sì | `'latn'` | | `hour12` | Indica se usare il formato orario a 12 ore. Ha la precedenza su `hourCycle`. | `boolean` | Sì | Dipende dall'impostazione regionale | | `hourCycle` | Ciclo orario usato dal formato dell'ora. | `'h11' \| 'h12' \| 'h23' \| 'h24'` | Sì | Dipende dall'impostazione regionale | | `timeZone` | Fuso orario IANA o offset UTC. | `string` | Sì | Fuso orario del runtime | | `weekday` | Lunghezza del nome del giorno della settimana. | `'long' \| 'short' \| 'narrow'` | Sì | — | | `era` | Lunghezza dell'etichetta dell'era. | `'long' \| 'short' \| 'narrow'` | Sì | — | | `year` | Anno numerico o a due cifre. | `'numeric' \| '2-digit'` | Sì | `'numeric'` quando non sono impostati stili o componenti | | `month` | Formato del mese numerico o per esteso. | `'numeric' \| '2-digit' \| 'long' \| 'short' \| 'narrow'` | Sì | `'numeric'` quando non sono impostati stili o componenti | | `day` | Giorno numerico o a due cifre. | `'numeric' \| '2-digit'` | Sì | `'numeric'` quando non sono impostati stili o componenti | | `dayPeriod` | Lunghezza di etichette come "al mattino" o "di notte". | `'long' \| 'short' \| 'narrow'` | Sì | — | | `hour` | Ora numerica o a due cifre. | `'numeric' \| '2-digit'` | Sì | — | | `minute` | Minuto numerico o a due cifre. | `'numeric' \| '2-digit'` | Sì | — | | `second` | Secondo numerico o a due cifre. | `'numeric' \| '2-digit'` | Sì | — | | `fractionalSecondDigits` | Numero di cifre della parte frazionaria dei secondi. | `1 \| 2 \| 3` | Sì | — | | `timeZoneName` | Lunghezza e stile dell'etichetta del fuso orario. | `'long' \| 'short' \| 'shortOffset' \| 'longOffset' \| 'shortGeneric' \| 'longGeneric'` | Sì | — | | `formatMatcher` | Algoritmo per associare le opzioni dei componenti a un formato dell'impostazione regionale. | `'basic' \| 'best fit'` | Sì | `'best fit'` | | `dateStyle` | Formato data predefinito. | `'full' \| 'long' \| 'medium' \| 'short'` | Sì | — | | `timeStyle` | Formato ora predefinito. | `'full' \| 'long' \| 'medium' \| 'short'` | Sì | — | * `dateStyle` e `timeStyle` possono essere usati insieme, ma non con opzioni dei componenti come `weekday`, `year`, `month`, `day`, `hour`, `minute` o `second`. * `hour12` ha la precedenza su `hourCycle`. * `dayPeriod` influisce solo sui formati orari a 12 ore. * I calendari supportati, i sistemi di numerazione, le etichette dei fusi orari e i valori delle opzioni dipendono dal runtime JavaScript. Consulta la [documentazione delle opzioni di `Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) per conoscere le opzioni più recenti disponibili e il comportamento del runtime. ### `locales` [#locales] **Tipo** `string[]` · **Facoltativo** · **Predefinito** impostazione regionale attiva Impostazioni regionali da usare per la formattazione. Se omesse, viene usata l'impostazione regionale attiva. Vedi l'[argomento `locales`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument). ### `name` [#name] **Tipo** `stringa` · **Facoltativo** Un nome facoltativo per il campo data, utilizzato per i metadati. ## Esempi [#examples] *Gli esempi importano da `gt-react`; importa invece dal package del tuo framework.* ```tsx title="EventDate.tsx" import { DateTime } from 'gt-react'; export default function EventDate({ event }) { return {event.date}; // [!code highlight] } ``` ```tsx title="EventDate.tsx" import { DateTime } from 'gt-react'; export default function EventDate({ event }) { return {event.date}; // [!code highlight] } ``` ```tsx title="EventDate.tsx" import { T, DateTime } from 'gt-react'; export default function EventDate({ event }) { return ( The time of the event is {event.date}. // [!code highlight] ); } ``` ```tsx title="EventDate.tsx" import { DateTime } from 'gt-react'; export default function EventDate({ event }) { return ( {event.date} ); } ``` ## Evitare gli errori di idratazione [#hydration] Poiché `` formatta le date localmente, può produrre un output diverso sul server e sul client. Quando React confronta l'HTML generato sul server con il rendering sul client e i due non coincidono, si verifica un errore di idratazione. In genere questo accade quando: * **Non è impostato alcun `timeZone` esplicito.** Il server può essere in esecuzione in UTC mentre il browser usa l'ora locale, quindi un timestamp può essere visualizzato come `"1/27/2025"` sul server e `"1/28/2025"` sul client. * **L'impostazione regionale predefinita è diversa tra gli ambienti.** Un'impostazione regionale predefinita non allineata produce stringhe diverse (ad esempio, `"27/01/2025"` rispetto a `"1/27/2025"`). Imposta sia l'impostazione regionale sia il fuso orario in modo che server e client producano sempre la stessa stringa: ```tsx {event.date} ``` ## Sitemap See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.