# gt-react: General Translation React SDK: DateTime
URL: https://generaltranslation.com/en-GB/docs/react/api/components/datetime.mdx
---
title: DateTime
description: API reference for the DateTime component
---

{/* AUTO-GENERATED: Do not edit directly. Edit the template in content/docs-templates/ instead. */}


## Overview

The `<DateTime>` component renders a formatted date or time string, with support for customisation such as formatting options and locale settings.
The date or time is formatted according to the current locale and any optional parameters passed.

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

All formatting is handled locally using the [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) library.

<Callout type="warn">
  `<DateTime>` can cause **React hydration errors** in server-rendered apps. See [Avoiding hydration errors](#avoiding-hydration-errors) below.
</Callout>


## Reference

### Props

<TypeTable
  type={{
  "children?": {
      description: 'Date content to be formatted.',
      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',
  },
}}
/>

### Description

| Prop Name  | Description                                                                                                                                                                                                                                                                                |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `children` | The content to render inside the component. Typically a date or time value. If provided, it takes precedence over the `value` prop.                                                                                                                                                        |
| `value`    | The default value for the date or time. Can be a string, number (timestamp), or Date object.                                                                                                                                                                                               |
| `options`  | Optional formatting options for the date or time, following the [`Intl.DateTimeFormatOptions` specification](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat). Use this to define styles such as weekday names, time zones, and more. |
| `locales`  | Optional locales to specify the formatting locale. If not provided, the user&#39;s locale is used. Read more about specifying locales [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument).                                      |

### Returns

`JSX.Element` containing the formatted date or time as a string.

***

## Examples

### Basic usage

The `<DateTime>` component can be used to display localised date or time values.

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

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


### Specifying locales

The `<DateTime>` component can be used to display date or time values in a specific locale.

```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]
    );
}
```


### Translating DateTime

If you want the date and time to be displayed in a sentence that is also being translated, you can wrap the `<DateTime>` component in a `<T>` component.

```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>
    );
}
```


### Custom formatting

The `<DateTime>` component supports custom formatting options.

```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>.
    );
}
```

***


## Avoiding hydration errors

Because `<DateTime>` formats dates locally using `Intl.DateTimeFormat`, it can produce **different output on the server and client**. When React compares the server-rendered HTML with the client render and they don&#39;t match, you get a hydration error.

This typically happens when:

* **No explicit `timeZone` is set.** The server may run in UTC (or another time zone), while the user&#39;s browser uses their local time zone. A timestamp like `1738010355` could render as `"27/01/2025"` on the server but `"28/01/2025"` on the client if the time zones differ.
* **The default locale differs between environments.** If the server&#39;s default locale doesn&#39;t match the client&#39;s, the formatted string may differ (e.g. `"27/01/2025"` vs `"1/27/2025"`).

### How to fix it

**Set an explicit `timeZone` in `options`** to ensure consistent output:

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

**Specify explicit `locales`** to avoid locale mismatches:

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

By pinning both the locale and time zone, the server and client will always produce the same formatted string.


## Notes

* The `<DateTime>` component is a variable component that can be used to format date and time values.
* The component uses the [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) library for formatting.

## Next steps

* For more details and usage examples for the `<DateTime>` component and other variable components such as `<Currency>`, `<Num>`, and `<Var>`, see the [Using Variable Components](/docs/react/guides/variables) documentation.