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

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


## Panoramica

Il componente `<DateTime>` visualizza una stringa di data o 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 specificati.

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

Tutta la formattazione viene gestita localmente tramite 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 di React** nelle app con rendering lato server. Consulta [Come evitare gli errori di idratazione](#avoiding-hydration-errors) più sotto.
</Callout>


## Riferimento

### Proprietà

<TypeTable
  type={{
  "children?": {
      description: 'Contenuto 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 della 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 base alla [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.                                        |
| `locales`       | locales facoltativi per specificare l&#39;impostazione regionale di formattazione. Se non vengono forniti, viene usata l&#39;impostazione regionale dell&#39;utente. Per saperne di più su come specificare i locales, consulta [questa pagina](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 sotto forma di 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-react';

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


### Specificare le locales

Il componente `<DateTime>` può essere usato per visualizzare valori di data o ora in una determinata locales.

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

import { DateTime } from 'gt-react';

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


### Tradurre DateTime

Supponiamo che tu voglia visualizzare data e ora in 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-react';

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-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

Poiché `<DateTime>` formatta le date localmente tramite `Intl.DateTimeFormat`, può produrre **output diversi sul server e sul client**. Quando React confronta l&#39;HTML renderizzato sul server con il rendering sul 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 fuso orario locale. Una marca temporale come `1738010355` potrebbe essere resa 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 tra i 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"` vs `"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 tra impostazioni regionali:

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

Fissando sia l&#39;impostazione regionale sia il fuso orario, server e 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.

## Passi successivi

* Per maggiori dettagli ed esempi di utilizzo del componente `<DateTime>` e di altri componenti variabili come `<Currency>`, `<Num>` e `<Var>`, consulta la documentazione [Uso dei componenti variabili](/docs/react/guides/variables).