Пошук уроків, статей та іншого контенту
Навчитеся налаштовувати локаль, стиль, часову зону та формат частин дати для різних інтерфейсів.
Intl.DateTimeFormat: форматування датОб’єкт Intl.DateTimeFormat форматують дату відповідно до локалі користувача та заданих параметрів:
const formatter = new Intl.DateTimeFormat("uk-UA");
console.log(formatter.format(new Date()));Вивід залежить від поточної дати, але для української локалі це буде приблизно:
26.07.2026Форматер можна створити один раз і використовувати для багатьох дат:
const formatter = new Intl.DateTimeFormat("uk-UA");
const dates = [
new Date("2026-01-15T10:30:00Z"),
new Date("2026-06-20T18:45:00Z"),
];
for (const date of dates) {
console.log(formatter.format(date));
}Це зручніше, ніж щоразу викликати toLocaleDateString(), особливо якщо форматування виконується в циклі.
Перший аргумент конструктора визначає локаль:
const date = new Date("2026-07-26T14:30:00Z");
console.log(new Intl.DateTimeFormat("uk-UA").format(date));
console.log(new Intl.DateTimeFormat("en-US").format(date));
console.log(new Intl.DateTimeFormat("de-DE").format(date));Можливий результат:
26.07.2026
7/26/2026
26.07.2026Одна й та сама дата може мати різний порядок компонентів, різні роздільники та різні назви місяців.
Можна передати масив локалей. Браузер вибере першу підтримувану локаль:
const formatter = new Intl.DateTimeFormat([
"uk-UA",
"pl-PL",
"en-US",
]);
console.log(formatter.format(new Date()));Це корисно, коли застосунок підтримує кілька мов і має запасний варіант.
Якщо локаль не передати, використовується локаль середовища виконання:
const formatter = new Intl.DateTimeFormat();
console.log(formatter.format(new Date()));Результат може відрізнятися на різних пристроях. Для передбачуваного інтерфейсу локаль краще задавати явно або отримувати з налаштувань користувача.
Другий аргумент конструктора — це об’єкт параметрів. Він визначає, які частини дати та часу показувати.
const date = new Date("2026-07-26T14:35:42Z");
const formatter = new Intl.DateTimeFormat("uk-UA", {
year: "numeric",
month: "long",
day: "numeric",
weekday: "long",
hour: "2-digit",
minute: "2-digit",
});
console.log(formatter.format(date));Приблизний результат:
неділя, 26 липня 2026 р., 17:35Конкретний вигляд може залежати від реалізації середовища та локалі.
Для року доступні значення:
"numeric" — повний числовий рік;
"2-digit" — дві останні цифри року.
const date = new Date("2026-07-26T14:35:00Z");
console.log(new Intl.DateTimeFormat("uk-UA", {
year: "numeric",
}).format(date));
console.log(new Intl.DateTimeFormat("uk-UA", {
year: "2-digit",
}).format(date));Параметр month підтримує такі значення:
"numeric" — номер місяця без початкового нуля;
"2-digit" — номер місяця з двома цифрами;
"short" — скорочена назва;
"long" — повна назва;
"narrow" — дуже коротке представлення, якщо воно підтримується локаллю.
const date = new Date("2026-07-26T14:35:00Z");
const options = [
{ month: "numeric" },
{ month: "2-digit" },
{ month: "short" },
{ month: "long" },
{ month: "narrow" },
];
for (const option of options) {
console.log(new Intl.DateTimeFormat("uk-UA", option).format(date));
}Для місяців "short" і "long" результат буде локалізовано:
7
07
лип.
липень
ЛПараметр day може мати значення:
"numeric" — день без початкового нуля;
"2-digit" — день із двома цифрами.
const date = new Date("2026-07-05T14:35:00Z");
console.log(new Intl.DateTimeFormat("uk-UA", {
day: "numeric",
}).format(date));
console.log(new Intl.DateTimeFormat("uk-UA", {
day: "2-digit",
}).format(date));Параметр weekday використовується для назви дня тижня:
"short" — скорочена назва;
"long" — повна назва;
"narrow" — коротке представлення.
const date = new Date("2026-07-26T14:35:00Z");
console.log(new Intl.DateTimeFormat("uk-UA", {
weekday: "long",
}).format(date));
console.log(new Intl.DateTimeFormat("uk-UA", {
weekday: "short",
}).format(date));Для часу використовують параметри hour, minute, second і fractionalSecondDigits.
const date = new Date("2026-07-26T14:35:42.123Z");
const formatter = new Intl.DateTimeFormat("uk-UA", {
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
fractionalSecondDigits: 3,
timeZone: "UTC",
});
console.log(formatter.format(date));Приблизний результат:
14:35:42,123Параметр hour приймає:
"numeric" — година без початкового нуля;
"2-digit" — година з двома цифрами.
Формат години залежить від локалі. Деякі локалі використовують 12-годинний формат із позначками на кшталт AM і PM, а інші — 24-годинний формат.
Щоб явно керувати 12- або 24-годинним виглядом, можна використати hour12:
const date = new Date("2026-07-26T14:35:00Z");
console.log(new Intl.DateTimeFormat("en-US", {
hour: "numeric",
minute: "2-digit",
hour12: true,
timeZone: "UTC",
}).format(date));
console.log(new Intl.DateTimeFormat("uk-UA", {
hour: "numeric",
minute: "2-digit",
hour12: false,
timeZone: "UTC",
}).format(date));Для minute і second зазвичай використовують "numeric" або "2-digit":
const date = new Date("2026-07-26T14:05:09Z");
const formatter = new Intl.DateTimeFormat("uk-UA", {
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
timeZone: "UTC",
});
console.log(formatter.format(date));Параметр fractionalSecondDigits показує частки секунди. Допустимі значення — 1, 2 або 3.
const date = new Date("2026-07-26T14:35:42.123Z");
const formatter = new Intl.DateTimeFormat("uk-UA", {
second: "2-digit",
fractionalSecondDigits: 3,
timeZone: "UTC",
});
console.log(formatter.format(date));Замість окремих параметрів можна використовувати dateStyle і timeStyle.
dateStyleПараметр dateStyle має значення:
"full" — максимально повний формат;
"long" — повний місяць і розширене представлення;
"medium" — середня деталізація;
"short" — короткий числовий формат.
const date = new Date("2026-07-26T14:35:00Z");
for (const dateStyle of ["full", "long", "medium", "short"]) {
const formatter = new Intl.DateTimeFormat("uk-UA", {
dateStyle,
timeZone: "UTC",
});
console.log(dateStyle, formatter.format(date));
}timeStyleПараметр timeStyle відповідає за деталізацію часу:
"full" — час із часовою зоною;
"long" — час із розширеною назвою часової зони;
"medium" — години, хвилини та секунди;
"short" — години та хвилини.
const date = new Date("2026-07-26T14:35:42Z");
const formatter = new Intl.DateTimeFormat("uk-UA", {
timeStyle: "medium",
timeZone: "UTC",
});
console.log(formatter.format(date));dateStyle і timeStyle зручні для типових форматів, але їх не можна комбінувати з окремими параметрами компонентів, наприклад із year, month або hour в одному об’єкті параметрів.
Правильно:
new Intl.DateTimeFormat("uk-UA", {
dateStyle: "long",
});Також правильно:
new Intl.DateTimeFormat("uk-UA", {
year: "numeric",
month: "long",
day: "numeric",
});Небажано змішувати ці два підходи:
// Викличе помилку через несумісні параметри
new Intl.DateTimeFormat("uk-UA", {
dateStyle: "long",
day: "numeric",
});Об’єкт Date зберігає момент часу, а не локальну часову зону. Під час форматування потрібно явно визначати, у якій часовій зоні показувати цей момент.
const date = new Date("2026-07-26T12:00:00Z");
console.log(new Intl.DateTimeFormat("uk-UA", {
dateStyle: "medium",
timeStyle: "short",
timeZone: "UTC",
}).format(date));
console.log(new Intl.DateTimeFormat("uk-UA", {
dateStyle: "medium",
timeStyle: "short",
timeZone: "Europe/Kyiv",
}).format(date));
console.log(new Intl.DateTimeFormat("en-US", {
dateStyle: "medium",
timeStyle: "short",
timeZone: "America/New_York",
}).format(date));Один момент часу буде показано по-різному в різних зонах.
Назви часових зон передаються у форматі IANA, наприклад:
"UTC";
"Europe/Kyiv";
"Europe/London";
"America/New_York";
"Asia/Tokyo".
Якщо timeZone не вказано, використовується часова зона середовища виконання. У браузері це зазвичай часова зона пристрою користувача.
Параметр timeZoneName додає назву або скорочення часової зони:
"short" — короткий варіант;
"long" — повна назва;
"shortOffset" — коротке зміщення UTC;
"longOffset" — розширене зміщення UTC;
"shortGeneric" — коротка загальна назва;
"longGeneric" — повна загальна назва.
const date = new Date("2026-07-26T12:00:00Z");
const formatter = new Intl.DateTimeFormat("uk-UA", {
dateStyle: "medium",
timeStyle: "short",
timeZone: "Europe/Kyiv",
timeZoneName: "short",
});
console.log(formatter.format(date));Підтримка конкретного вигляду назви залежить від локалі та середовища.
Якщо потрібно вивести дату в реченні або вставити окремі частини в HTML, метод format() може бути недостатньо гнучким.
Для цього існує formatToParts().
const date = new Date("2026-07-26T14:35:42Z");
const formatter = new Intl.DateTimeFormat("uk-UA", {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
hour: "2-digit",
minute: "2-digit",
timeZone: "UTC",
});
const parts = formatter.formatToParts(date);
console.log(parts);Метод повертає масив об’єктів із властивостями type і value:
[
{ type: "weekday", value: "неділя" },
{ type: "literal", value: ", " },
{ type: "day", value: "26" },
// ...
]Тип literal — це роздільник або інший текст, який не є окремим компонентом дати.
const date = new Date("2026-07-26T14:35:42Z");
const formatter = new Intl.DateTimeFormat("uk-UA", {
year: "numeric",
month: "long",
day: "numeric",
timeZone: "UTC",
});
const parts = formatter.formatToParts(date);
const month = parts.find((part) => part.type === "month")?.value;
const day = parts.find((part) => part.type === "day")?.value;
const year = parts.find((part) => part.type === "year")?.value;
console.log({
day,
month,
year,
});Результат:
{
day: "26",
month: "липня",
year: "2026"
}Такий підхід не залежить від порядку компонентів у локалі.
Уявімо, що в інтерфейсі потрібно показати:
день тижня;
дату;
час;
часову зону;
локалізований текст.
const event = {
title: "Конференція JavaScript",
startsAt: "2026-07-26T12:00:00Z",
};
const locale = "uk-UA";
const timeZone = "Europe/Kyiv";
const date = new Date(event.startsAt);
const formatter = new Intl.DateTimeFormat(locale, {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
hour: "2-digit",
minute: "2-digit",
timeZone,
timeZoneName: "short",
});
const parts = formatter.formatToParts(date);
const getPart = (type) =>
parts.find((part) => part.type === type)?.value ?? "";
const result = {
title: event.title,
weekday: getPart("weekday"),
day: getPart("day"),
month: getPart("month"),
year: getPart("year"),
hour: getPart("hour"),
minute: getPart("minute"),
timeZoneName: getPart("timeZoneName"),
};
console.log(result);Тепер окремі частини можна розмістити в різних елементах інтерфейсу:
console.log(
`${result.weekday}, ${result.day} ${result.month} ${result.year}`
);
console.log(
`${result.hour}:${result.minute} ${result.timeZoneName}`
);Важливо: не варто вручну припускати, що дата завжди має порядок «день, місяць, рік». formatToParts() дає змогу зберегти локалізацію, але керувати розміщенням компонентів у власному інтерфейсі.
calendarПараметр calendar визначає календар. За замовчуванням використовується календар локалі.
const date = new Date("2026-07-26T00:00:00Z");
const formatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "long",
calendar: "gregory",
timeZone: "UTC",
});
console.log(formatter.format(date));У більшості прикладних інтерфейсів достатньо календаря за замовчуванням. Спеціально задавати його варто лише тоді, коли вимоги продукту цього потребують.
numberingSystemПараметр numberingSystem визначає систему цифр:
const date = new Date("2026-07-26T00:00:00Z");
const formatter = new Intl.DateTimeFormat("en-US", {
year: "numeric",
month: "numeric",
day: "numeric",
numberingSystem: "latn",
timeZone: "UTC",
});
console.log(formatter.format(date));Цей параметр особливо важливий для локалей, у яких за замовчуванням можуть використовуватися не латинські цифри.
dayPeriodУ деяких локалях можна використовувати ширші позначення частини дня:
const date = new Date("2026-07-26T14:35:00Z");
const formatter = new Intl.DateTimeFormat("en-US", {
hour: "numeric",
dayPeriod: "long",
timeZone: "UTC",
});
console.log(formatter.format(date));Підтримка та вигляд значення залежать від локалі.
Метод resolvedOptions() повертає параметри, які фактично використовує форматер:
const formatter = new Intl.DateTimeFormat("uk-UA", {
dateStyle: "long",
timeZone: "Europe/Kyiv",
});
console.log(formatter.resolvedOptions());Серед результатів можна отримати:
locale;
calendar;
numberingSystem;
timeZone;
dateStyle.
Це корисно для налагодження, коли локаль або часова зона надходять із налаштувань користувача.
Intl.DateTimeFormat і методи DateМетоди Date також мають локалізовані варіанти:
const date = new Date("2026-07-26T14:35:00Z");
console.log(date.toLocaleDateString("uk-UA"));
console.log(date.toLocaleTimeString("uk-UA"));
console.log(date.toLocaleString("uk-UA"));Їм можна передати ті самі параметри:
const date = new Date("2026-07-26T14:35:00Z");
console.log(
date.toLocaleDateString("uk-UA", {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
timeZone: "UTC",
})
);Для одноразового форматування це зручно. Якщо формат потрібно застосувати багато разів, краще створити один екземпляр Intl.DateTimeFormat:
const formatter = new Intl.DateTimeFormat("uk-UA", {
year: "numeric",
month: "2-digit",
day: "2-digit",
timeZone: "UTC",
});
const dates = [
new Date("2026-01-01T00:00:00Z"),
new Date("2026-02-01T00:00:00Z"),
new Date("2026-03-01T00:00:00Z"),
];
const formattedDates = dates.map((date) => formatter.format(date));
console.log(formattedDates);const shortDateFormatter = new Intl.DateTimeFormat("uk-UA", {
dateStyle: "short",
timeZone: "UTC",
});const headingDateFormatter = new Intl.DateTimeFormat("uk-UA", {
weekday: "long",
day: "numeric",
month: "long",
timeZone: "UTC",
});const messageTimeFormatter = new Intl.DateTimeFormat("uk-UA", {
hour: "2-digit",
minute: "2-digit",
timeZone: "Europe/Kyiv",
});const documentDateFormatter = new Intl.DateTimeFormat("uk-UA", {
dateStyle: "long",
timeZone: "Europe/Kyiv",
});const serverTimeFormatter = new Intl.DateTimeFormat("uk-UA", {
dateStyle: "medium",
timeStyle: "medium",
timeZone: "UTC",
});Рядки на кшталт "2026-07-26T14:00:00" не містять інформації про часову зону. Результат їх обробки може залежати від середовища.
Краще передавати часову зону явно:
const date = new Date("2026-07-26T14:00:00Z");Або використовувати зміщення:
const date = new Date("2026-07-26T14:00:00+03:00");Символ Z означає UTC. Якщо потрібно показати дату в конкретній зоні, укажіть timeZone:
const date = new Date("2026-07-26T12:00:00Z");
const kyivFormatter = new Intl.DateTimeFormat("uk-UA", {
dateStyle: "medium",
timeStyle: "short",
timeZone: "Europe/Kyiv",
});
console.log(kyivFormatter.format(date));getMonth()Метод getMonth() повертає місяць від 0 до 11, а getDay() — номер дня тижня, а не дня місяця. Ручне складання дат часто призводить до помилок із нулями, локалями та часовими зонами.
Для відображення дат використовуйте Intl.DateTimeFormat.
Не слід припускати, що результат завжди має вигляд:
день.місяць.рікДля різних локалей порядок відрізняється. Якщо частини потрібні окремо, використовуйте formatToParts().
new Date("2026-07-26T00:00:00Z") — це конкретний момент у UTC. У часовій зоні із від’ємним зміщенням він може відображатися як попередній календарний день.
Тому під час форматування завжди визначайте, яку часову зону має бачити користувач.
Не варто без потреби створювати новий форматер для кожної дати:
// Менш ефективний підхід
dates.map((date) =>
new Intl.DateTimeFormat("uk-UA", {
dateStyle: "medium",
}).format(date)
);Краще створити його один раз:
const formatter = new Intl.DateTimeFormat("uk-UA", {
dateStyle: "medium",
});
const result = dates.map((date) => formatter.format(date));Створіть форматер для повідомлень календаря з такими вимогами:
Локаль — "uk-UA".
Часова зона — "Europe/Kyiv".
Показуються день тижня, день, повна назва місяця та рік.
Час показується з годинами та хвилинами.
За допомогою formatToParts() отримайте окремо місяць і час.
Один із можливих варіантів:
const date = new Date("2026-07-26T12:45:00Z");
const formatter = new Intl.DateTimeFormat("uk-UA", {
weekday: "long",
day: "numeric",
month: "long",
year: "numeric",
hour: "2-digit",
minute: "2-digit",
timeZone: "Europe/Kyiv",
});
const parts = formatter.formatToParts(date);
const getPart = (type) =>
parts.find((part) => part.type === type)?.value ?? "";
console.log("Повна дата:", formatter.format(date));
console.log("Місяць:", getPart("month"));
console.log("Час:", `${getPart("hour")}:${getPart("minute")}`);Intl.DateTimeFormat локалізує дати та час відповідно до заданої локалі.
Перший аргумент визначає локаль, а другий — параметри форматування.
year, month, day і weekday керують частинами календарної дати.
hour, minute, second і fractionalSecondDigits керують часом.
dateStyle і timeStyle надають готові рівні деталізації.
timeZone дає змогу показати момент часу в потрібній часовій зоні.
formatToParts() повертає окремі локалізовані частини дати.
Для повторного форматування однакових дат доцільно повторно використовувати створений форматер.
Не слід вручну припускати порядок компонентів дати або ігнорувати часову зону.