Overview

The <DateTime> component renders a formatted date or time string and supports customisation such as formatting options and locale. The date or time is formatted according to the current locale and any optional parameters provided.

<DateTime>{1738010355}</DateTime>
// Output: 27/01/2025

All formatting is handled locally using the Intl.DateTimeFormat library.

Reference

Props

Description

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.

import { DateTime } from 'gt-react';

export default function EventDate(event) {
    return (
        <DateTime> {event.date} </DateTime>. 
    );
}

Specifying locales

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

import { DateTime } from 'gt-react';

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

Translating <DateTime>

Suppose you want the date and time to appear within a sentence that’s also being translated. You can wrap the <DateTime> component in a <T> component.

import { T, DateTime } from 'gt-react';

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

Custom formatting

The <DateTime> component supports custom formatting options.

import { DateTime } from 'gt-react';

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

Notes

• The <DateTime> component is a dynamic component that can be used to format date and time values.
• The component uses the Intl.DateTimeFormat API for formatting.

Next steps

• For more details and examples of how to use the <DateTime> component and other variable components such as <Currency>, <Num>, and <Var>,