LETUNOFF DOCS

JS. Date. Отображение даты пользователю

🧱 Суть

Объект Date хранит дату в техническом виде.
Для пользователя её нужно преобразовать в читаемую строку.

Основные инструменты:

  • toISOString()
  • toLocaleDateString()
  • Intl.DateTimeFormat

📦 Проблема

Одна и та же дата может выглядеть по-разному:

2025-04-08

или:

8 апреля 2025 г.

Для базы данных нужен один формат.
Для интерфейса – красивый и локализованный.

toISOString()

new Date().toISOString();

Результат:

2025-04-08T11:23:45.000Z

Особенности:

  • всегда UTC
  • одинаковый формат везде
  • подходит для API и БД

toLocaleDateString()

new Date()
    .toLocaleDateString('ru-RU');

Результат:

08.04.2025

С настройками:

new Date().toLocaleDateString('ru-RU', {
    day: 'numeric',
    month: 'long',
    year: 'numeric'
});

Результат:

8 апреля 2025 г.

Intl.DateTimeFormat

Более гибкий вариант:

new Intl.DateTimeFormat('ru-RU', {
    day: 'numeric',
    month: 'long'
}).format(new Date());

Результат:

8 апреля

Сравнение

МетодИспользование
toISOString()API, база данных
toLocaleDateString()быстрый вывод
Intl.DateTimeFormatгибкое форматирование

Повторное использование

Если формат используется несколько раз:

const options = {
    day: '2-digit',
    month: '2-digit'
} as const;
 
const formatter =
    new Intl.DateTimeFormat('ru-RU', options);

Если нужно один раз:

const date =
    new Intl.DateTimeFormat('ru-RU', {
        day: '2-digit',
        month: '2-digit'
    }).format(new Date());

🎯 Вывод

  • toISOString() → технический формат.
  • toLocaleDateString() → простой вывод.
  • Intl.DateTimeFormat → лучший вариант для сложного UI.

🔗 Связано

Обратные ссылки