Обзор

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

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

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

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

Свойства

Описание

Возвращает

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

Примеры

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

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

import { DateTime } from 'gt-next';

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

Задание локалей

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

import { DateTime } from 'gt-next';

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

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

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

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

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

Пользовательские форматы

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

import { DateTime } from 'gt-next';

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>, см.