Як форматувати Date у JavaScript — коротко й по суті
Пояснюємо та наводимо приклади
Форматування дат — одна з найчастіших задач у JavaScript. За замовчуванням Date має мінімальні можливості для цього, тому доводиться форматувати вручну або використовувати додаткові інструменти. Нижче — найпоширеніші способи, від базових до зручних.
1. Форматування вручну
Це найпростіший та найконтрольованіший підхід: розбити об’єкт Date на частини та зібрати їх у потрібному форматі.
function formatDate(date) {
const pad = n => String(n).padStart(2, '0'); // додає 0, якщо цифра одна
const day = pad(date.getDate());
const month = pad(date.getMonth() + 1); // місяці починаються з 0
const year = date.getFullYear();
const hours = pad(date.getHours());
const minutes = pad(date.getMinutes());
return `${day}-${month}-${year} ${hours}:${minutes}`;
}
console.log(formatDate(new Date()));
//"24-09-2025 14:30"
2. Використання toLocaleDateString() і toLocaleTimeString()
Методи toLocaleDateString() і toLocaleTimeString() вміють форматувати дату згідно з мовою та регіональними налаштуваннями. Це простий спосіб отримати красиво відформатовану дату без сторонніх бібліотек.
const now = new Date();
const formattedDate = now.toLocaleDateString('en-GB', {
day: '2-digit',
month: 'short',
year: 'numeric'
});
const formattedTime = now.toLocaleTimeString('en-GB', {
hour: '2-digit',
minute: '2-digit'
});
console.log(`${formattedDate} ${formattedTime}`);
// "24 Sep 2025 14:30"
Якщо ж вам потрібна дата українською, можна використовувати 'uk-UA':
new Date().toLocaleDateString('uk-UA', { day: 'numeric', month: 'long', year: 'numeric' })
//"24 вересня 2025 р."
3. Налаштування форматування через опції
Опції перетворюють «грубий» формат Date у красиву, зрозумілу й локалізовану дату, економлячи час та уніфікуючи формат у всьому проєкті. Ось ключові параметри, які можуть вам знадобитися:
new Date().toLocaleString('en-US', {
weekday: 'long', // "Tuesday"
day: '2-digit', // "24"
month: 'short', // "Sep"
year: 'numeric', // "2025"
hour: '2-digit', // "14"
minute: '2-digit', // "30"
second: '2-digit', // "15"
hour12: false // 24-годинний формат
});
Важливо: якщо не хочете змінювати локаль, але хочете задати опції — передайте undefined, а не null:
new Date().toLocaleString(undefined, { weekday: 'short', month: 'long' });
4. Використання бібліотек (date-fns, dayjs, Luxon, Moment.js)
Якщо у вашому проєкті багато роботи з датами — зручно одразу підключити бібліотеку. Вона спрощує форматування і додає багато можливостей (часові пояси, відносний час, парсинг рядків тощо).
Приклад з date-fns:
import { format } from 'date-fns';
console.log(format(new Date(), 'dd-MM-yyyy HH:mm'));
// "24-09-2025 14:30"
Приклад з dayjs:
import dayjs from 'dayjs';
console.log(dayjs().format('DD/MM/YYYY HH:mm'));
// "24/09/2025 14:30"
Якщо ви пишете невеликий скрипт або внутрішній інструмент — використовуйте toLocaleDateString(). Якщо ж проєкт зростає і форматування трапляється в багатьох місцях — одразу підключіть date-fns або dayjs, це зекономить час і нерви.
На завершення
Форматування дати в JavaScript може здаватися дрібницею, але правильний підхід значно підвищує якість коду і спрощує вашу ж роботу. Знання різних методів, як-от ручне форматування, використання toLocaleString() з опціями та бібліотек на кшталт date-fns або dayjs, дає купу переваг. Тут і більше контролю, і додаткова гнучкість, і економія часу, адже можна швидко змінювати формати без переписування функцій.
