# General Translation React SDKs (gt-react, gt-next): DateTime
URL: https://generaltranslation.com/it/docs/react/reference/components/datetime.mdx
---

title: DateTime
description: Formatta una data e un'ora per l'impostazione regionale attiva con General Translation gt-react. Riferimento API per DateTime.

---

Il componente `<DateTime>` visualizza una data o un&#39;ora formattata per l&#39;impostazione regionale attiva. Supporta opzioni di formattazione personalizzate e consente di sovrascrivere l&#39;impostazione regionale.

*Disponibile in `gt-react`, `gt-next`, `gt-tanstack-start` e `gt-react-native`. Gli esempi importano da `gt-react`; importa invece dal pacchetto del tuo framework.*

## Panoramica [#overview]

Passa un `Date` come contenuto figlio e `<DateTime>` lo formatta in base all&#39;impostazione regionale attiva.

```tsx
<DateTime>{new Date(1738010355000)}</DateTime>
// 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: `<DateTime>` 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&#39;API di General Translation.
* **Determinazione dell&#39;impostazione regionale.** L&#39;impostazione regionale attiva determina la formattazione, a meno che non venga sovrascritta con `locales`.
* **Il fuso orario conta.** Senza un `timeZone` esplicito, l&#39;output dipende dal fuso orario dell&#39;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&#39;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&#39;ora da formattare, sotto forma di oggetto `Date`.

### `options` [#options]

**Tipo** `Intl.DateTimeFormatOptions` · **Facoltativo** · **Predefinito** `{}`

Opzioni di formattazione conformi alla specifica [`Intl.DateTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat), ad esempio `dateStyle`, `timeStyle` e `timeZone`.

### `locales` [#locales]

**Tipo** `string[]` · **Facoltativo** · **Predefinito** impostazione regionale attiva

Impostazioni regionali da usare per la formattazione. Se omesse, viene usata l&#39;impostazione regionale attiva. Vedi l&#39;[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]

```tsx title="EventDate.tsx"
import { DateTime } from 'gt-react';

export default function EventDate({ event }) {
  return <DateTime>{event.date}</DateTime>; // [!code highlight]
}
```

```tsx title="EventDate.tsx"
import { DateTime } from 'gt-react';

export default function EventDate({ event }) {
  return <DateTime locales={['fr-FR']}>{event.date}</DateTime>; // [!code highlight]
}
```

```tsx title="EventDate.tsx"
import { T, DateTime } from 'gt-react';

export default function EventDate({ event }) {
  return (
    <T>
      The time of the event is <DateTime>{event.date}</DateTime>. // [!code highlight]
    </T>
  );
}
```

```tsx title="EventDate.tsx"
import { DateTime } from 'gt-react';

export default function EventDate({ event }) {
  return (
    <DateTime
      options={{
        dateStyle: 'full', // [!code highlight]
        timeStyle: 'long', // [!code highlight]
        timeZone: 'Australia/Sydney', // [!code highlight]
      }}
    >
      {event.date}
    </DateTime>
  );
}
```

## Evitare gli errori di idratazione [#hydration]

Poiché `<DateTime>` formatta le date localmente, può produrre un output diverso sul server e sul client. Quando React confronta l&#39;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&#39;ora locale, quindi un timestamp può essere visualizzato come `"1/27/2025"` sul server e `"1/28/2025"` sul client.
* **L&#39;impostazione regionale predefinita è diversa tra gli ambienti.** Un&#39;impostazione regionale predefinita non allineata produce stringhe diverse (ad esempio, `"27/01/2025"` rispetto a `"1/27/2025"`).

Imposta sia l&#39;impostazione regionale sia il fuso orario in modo che server e client producano sempre la stessa stringa:

```tsx
<DateTime locales={['en-US']} options={{ timeZone: 'UTC' }}>
  {event.date}
</DateTime>
```