# gt-next: General Translation Next.js SDK: DateTime
URL: https://generaltranslation.com/it/docs/next/api/components/datetime.mdx
---
title: DateTime
description: Documentazione di riferimento API per il componente DateTime
---

{/* GENERATO AUTOMATICAMENTE: non modificare direttamente. Modifica invece il template in content/docs-templates/. */}


## Panoramica

Il componente `<DateTime>` visualizza una stringa con una data o un&#39;ora formattata e supporta personalizzazioni come le opzioni di formattazione e l&#39;impostazione regionale.
La data o l&#39;ora viene formattata in base all&#39;impostazione regionale corrente e agli eventuali parametri facoltativi forniti.

```jsx
<DateTime>{1738010355}</DateTime>
// Output: 27/1/2025
```

La formattazione viene gestita interamente localmente utilizzando la libreria [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat).

<Callout type="warn">
  `<DateTime>` può causare **errori di idratazione in React** nelle app con rendering lato server. Vedi [Come evitare gli errori di idratazione](#avoiding-hydration-errors) più sotto.
</Callout>

## Guida di riferimento

### Пропсы

<TypeTable
  type={{
  "children?": {
      description: 'Contenuto di data da formattare.',
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "name?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "value?": {
      type: 'string | number | Date',
      optional: true,
      default: 'undefined',
  },
  "options?": {
      type: 'Intl.DateTimeFormatOptions',
      optional: true,
      default: '{}',
  },
  "locales?": {
      type: 'string[]',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Descrizione

| Nome prop  | Descrizione                                                                                                                                                                                                                                                                                                                                                      |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | Il contenuto da visualizzare all&#39;interno del componente, in genere un valore di data o ora. Se fornito, ha la precedenza sulla prop `value`.                                                                                                                                                                                                                 |
| `value`    | Il valore predefinito per la data o l&#39;ora. Può essere una stringa, un numero (timestamp) o un oggetto `Date`.                                                                                                                                                                                                                                                |
| `options`  | Opzioni facoltative di formattazione per la data o l&#39;ora, in conformità con la specifica [`Intl.DateTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat). Usale per definire stili come i nomi dei giorni della settimana, i fusi orari e altro ancora.                                 |
| `locales`  | Impostazioni regionali facoltative per specificare l&#39;impostazione regionale di formattazione. Se non vengono fornite, viene usata l&#39;impostazione regionale dell&#39;utente. Per maggiori informazioni su come specificare `locales`, vedi [qui](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument). |

### Restituisce

`JSX.Element` contenente la data o l&#39;ora formattata come stringa.

***

## Esempi

### Utilizzo di base

Il componente `<DateTime>` può essere usato per visualizzare valori di data o ora localizzati.

```jsx title="EventDate.jsx" copy
import { DateTime } from 'gt-next';

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


### Specificare le impostazioni regionali

Il componente `<DateTime>` può essere utilizzato per visualizzare valori di data o ora in una specifica impostazione regionale.

```jsx title="EventDate.jsx" copy

import { DateTime } from 'gt-next';

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


### Tradurre DateTime

Supponiamo che tu voglia visualizzare la data e l&#39;ora all&#39;interno di una frase che viene anch&#39;essa tradotta.
Puoi racchiudere il componente `<DateTime>` in un componente `<T>`.

```jsx title="EventDate.jsx" copy
import { T, DateTime } from 'gt-next';

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


### Formattazione personalizzata

Il componente `<DateTime>` supporta opzioni di formattazione personalizzate.

```jsx title="EventDate.jsx" copy
import { DateTime } from 'gt-next';

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

Poiché `<DateTime>` formatta le date localmente usando `Intl.DateTimeFormat`, può produrre **un output diverso sul server e sul client**. Quando React confronta l&#39;HTML di cui è stato eseguito il rendering sul server con quello del client e i due non corrispondono, si verifica un errore di idratazione.

In genere questo accade quando:

* **Non è impostato alcun `timeZone` esplicito.** Il server può essere in esecuzione in UTC (o in un altro fuso orario), mentre il browser dell&#39;utente usa il proprio fuso orario locale. Una marca temporale come `1738010355` potrebbe essere sottoposta a rendering come `"1/27/2025"` sul server, ma come `"1/28/2025"` sul client se i fusi orari sono diversi.
* **L&#39;impostazione regionale predefinita è diversa nei vari ambienti.** Se l&#39;impostazione regionale predefinita del server non corrisponde a quella del client, la stringa formattata può essere diversa (ad esempio `"27/01/2025"` rispetto a `"1/27/2025"`).

### Come risolvere

**Imposta un `timeZone` esplicito in `options`** per garantire un output coerente:

```jsx
<DateTime options={{ timeZone: 'America/New_York' }}>
  {event.date}
</DateTime>
```

**Specifica esplicitamente `locales`** per evitare incongruenze nelle impostazioni regionali:

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

Bloccando sia l&#39;impostazione regionale sia il fuso orario, il server e il client produrranno sempre la stessa stringa formattata.


## Note

* Il componente `<DateTime>` è un componente variabile che può essere utilizzato per formattare valori di data e ora.
* Il componente usa la libreria [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) per la formattazione.

## Passaggi successivi

* Per maggiori dettagli ed esempi d&#39;uso del componente `<DateTime>` e di altri componenti variabili come `<Currency>`, `<Num>` e `<Var>`, consulta la documentazione [Utilizzo dei componenti variabili](/docs/next/guides/variables).