# react-native: DateTime
URL: https://generaltranslation.com/it/docs/react-native/api/components/datetime.mdx
---
title: DateTime
description: Riferimento API del componente DateTime
---

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


## Panoramica

Il componente `<DateTime>` visualizza una stringa di data o ora formattata e supporta opzioni di personalizzazione come il formato 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 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 React** nelle app con rendering lato server. Vedi [Come evitare gli errori di idratazione](#avoiding-hydration-errors) più sotto.
</Callout>

## Riferimento

### Proprietà

<TypeTable
  type={{
  "children?": {
      description: 'Contenuto della 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 di formattazione facoltative per la data o l&#39;ora, conformi 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. Scopri di più su come specificare le impostazioni regionali [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 sotto forma di stringa.

***

## Esempi

### Utilizzo di base

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

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

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


### Specificare le impostazioni regionali

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

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

import { DateTime } from 'gt-react-native';

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


### Tradurre DateTime

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

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

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-native';

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 **output diversi sul server e sul client**. Quando React confronta l&#39;HTML di cui è stato eseguito il rendering sul server con quello eseguito sul client e i due non coincidono, si verifica un errore di idratazione.

Questo accade in genere quando:

* **Non è impostato alcun `timeZone` esplicito.** Il server può essere eseguito 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 visualizzata 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 gli 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 correggerlo

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

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

**Specifica `locales` in modo esplicito** per evitare incongruenze tra impostazioni regionali:

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

Impostando in modo esplicito sia l’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 utilizza 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 di utilizzo del componente `<DateTime>` e di altri componenti variabili come `<Currency>`, `<Num>` e `<Var>`, consulta la documentazione [Uso dei componenti variabili](/docs/react-native/guides/variables).