Форматирование дат и времени
Отображайте даты с помощью Intl.DateTimeFormat.
«Форматирование дат и времени» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Intl.DateTimeFormat
Intl.DateTimeFormat форматирует объекты Date с учётом локали, избавляя от ненадёжного ручного создания строк.
const dtf = new Intl.DateTimeFormat("en-US");
console.log(dtf.format(new Date("2026-05-29"))); // "5/29/2026"Различия локалей
Порядок частей даты зависит от региона: в US используется месяц/день/год, а в большей части Европы — день/месяц/год.
const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US").format(d)); // 5/29/2026
console.log(new Intl.DateTimeFormat("en-GB").format(d)); // 29/05/2026Предустановленные стили даты
dateStyle предоставляет предустановки "full", "long", "medium" и "short" для быстрого и понятного вывода.
const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { dateStyle: "full" }).format(d));
// "Friday, May 29, 2026"Стиль времени
timeStyle работает так же для части, содержащей время, и может сочетаться с dateStyle.
const d = new Date("2026-05-29T14:30:00");
console.log(new Intl.DateTimeFormat("en-US", { dateStyle: "medium", timeStyle: "short" }).format(d));
// "May 29, 2026, 2:30 PM"Параметры отдельных компонентов
Для точной настройки укажите компоненты, например year, month, day и weekday, по отдельности.
const d = new Date("2026-05-29");
const f = new Intl.DateTimeFormat("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" });
console.log(f.format(d)); // "Friday, May 29, 2026"Форматы месяца
month принимает значения "numeric", "2-digit", "short", "long" и "narrow".
const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { month: "long" }).format(d)); // "May"
console.log(new Intl.DateTimeFormat("en-US", { month: "short" }).format(d)); // "May"12- и 24-часовой формат
hour12: true/false переопределяет используемый по умолчанию в локали формат часов.
const d = new Date("2026-05-29T20:05:00");
console.log(new Intl.DateTimeFormat("en-US", { hour: "numeric", minute: "2-digit", hour12: false }).format(d));
// "20:05"Часовые пояса
Передайте имя часового пояса IANA в параметр timeZone, чтобы отображать дату в любом часовом поясе независимо от местного часового пояса среды выполнения.
const d = new Date("2026-05-29T12:00:00Z");
console.log(new Intl.DateTimeFormat("en-US", { timeStyle: "long", timeZone: "Asia/Tokyo" }).format(d));formatToParts
formatToParts возвращает массив типизированных токенов, позволяя стилизовать или переставлять отдельные части.
const parts = new Intl.DateTimeFormat("en-US").formatToParts(new Date("2026-05-29"));
console.log(parts.map((p) => p.type + ":" + p.value).join(" "));Форматирование диапазонов
formatRange(start, end) компактно отображает диапазон дат, объединяя общие компоненты.
const f = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric" });
console.log(f.formatRange(new Date("2026-05-01"), new Date("2026-05-05")));
// "May 1 – 5"Негригорианские календари
Параметр calendar поддерживает такие системы, как "islamic", "hebrew" и "japanese".
const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { calendar: "japanese", dateStyle: "long" }).format(d));Быстрая проверка
Проверьте форматирование дат.
Итоги: даты и время
Вы форматировали даты и время с помощью Intl.DateTimeFormat, использовали предустановки dateStyle/timeStyle и параметры отдельных компонентов, работали с часовыми поясами, 12- и 24-часовым форматом, formatToParts, диапазонами и альтернативными календарями. Далее: относительное время и формы множественного числа.
Часто задаваемые вопросы
Урок «Форматирование дат и времени» бесплатный?
Да — полный текст урока «Форматирование дат и времени» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Форматирование дат и времени»?
Отображайте даты с помощью Intl.DateTimeFormat. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Форматирование дат и времени»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Форматирование чисел и валют
- Форматирование дат и времени
- Относительное время и множественные формы
- Сортировка с учётом локали