Обзор

Компонент <DateTime> отображает отформатированную строку даты или времени и поддерживает настройку, включая параметры форматирования и локаль. Дата или время форматируются в соответствии с текущей локалью и любыми переданными необязательными параметрами.

<DateTime>{1738010355}</DateTime>
// Результат: 27.01.2025

Всё форматирование выполняется локально с использованием библиотеки Intl.DateTimeFormat.

Справочные материалы

Свойства

Описание

Возвращает

JSX.Element, содержащий строковое представление отформатированной даты или времени.

Примеры

Базовое использование

Компонент <DateTime> можно использовать для отображения локализованных значений даты и времени.

import { DateTime } from 'gt-react';

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

Указание локалей

Компонент <DateTime> можно использовать для отображения дат и времени в заданной локали.

import { DateTime } from 'gt-react';

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

Перевод компонента <DateTime>

Допустим, вы хотите вывести дату и время внутри предложения, которое тоже переводится. Вы можете обернуть компонент <DateTime> в компонент <T>.

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

export default function EventDate(event) {
    return (
        <T id="eventDate">
            Время проведения мероприятия: <DateTime> {event.date} </DateTime>. // [!code highlight]
        </T>
    );
}

Произвольное форматирование

Компонент <DateTime> поддерживает параметры произвольного форматирования.

import { DateTime } from 'gt-react';

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

Примечания

• Компонент <DateTime> — это параметризуемый компонент, который можно использовать для форматирования дат и времени.
• Компонент использует API Intl.DateTimeFormat для форматирования.

Дальнейшие шаги

• Подробнее о подробностях и примерах использования компонента <DateTime> и других компонент переменных, таких как <Currency>, <Num> и <Var>,