Час у JavaScript, яким він мав бути з самого початку.
Об'єкт Date тягне за собою 30 років вад: мутабельність, місяці з нуля, відсутність часових поясів. Temporal зі стандарту ES2026 виправляє це. Нижче — живі приклади, які можна запускати прямо в браузері.
Europe / Kyiv
—
—
Europe / London
—
—
America / New York
—
—
Asia / Tokyo
—
—
/ live
Пісочниця Temporal
Пишіть код із доступним об'єктом Temporal і функцією print(...). Останній вираз теж виводиться автоматично. Натисніть готовий приклад або пишіть власний.
приклади:
// результат зʼявиться тут
01
Незмінність
Методи Date (setMonth, setDate…) мутують сам об'єкт, тож посилання «тягне» зміни за собою. Об'єкти Temporal незмінні: будь-яка операція повертає новий екземпляр.
Legacy Date — мутує
копіюватиconst d1 = newDate('2026-01-15');
const d2 = d1; // те саме посилання
d2.setMonth(d2.getMonth() + 1); // мутує й d1!
Натисніть кнопку вище
Temporal — незмінний
копіюватиconst t1 = Temporal.PlainDate.from('2026-01-15');
const t2 = t1.add({ months: 1 });
// t1 лишається без змін
Натисніть кнопку вище
02
Індексація місяців
Date рахує місяці від нуля (0 = січень) — класичне джерело off-by-one помилок. Temporal рахує від одиниці й кидає помилку на невалідних значеннях замість «тихого» переповнення.
Legacy Date
копіюватиconst d = newDate(2026, 1, 15);
d.getMonth(); // зсув на 1, без помилок
Різниця між датами через мілісекунди ламається на високосних роках і різній довжині місяців. Temporal рахує календарно, а Duration вміє округлюватись і зводитись до однієї одиниці через .total().
Temporal — since() + round() + total()
копіюватиconst diff = end.since(start, { largestUnit: 'years' });
const totalDays = end.since(start, { largestUnit: 'days' }).days;
// високосні роки й довжина місяців — автоматично
Оберіть дати і натисніть «Розрахувати»
04
Зустріч між часовими поясами
Реальний кейс: ви призначаєте дзвінок у Києві — о котрій він для колег у Лондоні, Нью-Йорку та Токіо? PlainDateTime.toZonedDateTime(zone) прив'язує «настінний» час до пояса, далі withTimeZone() переводить у будь-який інший.
—
Оберіть час і натисніть кнопку
05
Калькулятор робочих днів
Додати N робочих днів, пропускаючи суботу й неділю. Властивість dayOfWeek (1 = понеділок … 7 = неділя) робить це елементарним — без ручного возіння з getDay() та зсувами.
Temporal
копіюватиlet date = Temporal.PlainDate.from(start);
let added = 0;
while (added < n) {
date = date.add({ days: 1 });
if (date.dayOfWeek < 6) added++; // пн–пт
}
Оберіть дату та кількість днів
06
«Скільки часу тому»
Гуманізований відносний час для стрічок і коментарів. Рахуємо через Temporal.Now.instant().since() й округлюємо до найбільшої одиниці — з коректними українськими відмінками (1 хвилина, 2 хвилини, 5 хвилин).
Temporal
Оберіть момент у минулому
07
Перехід на літній/зимовий час (DST)
Найпідступніший баг: «додати 24 години» ≠ «додати 1 день», коли між ними переводять годинник. Temporal розрізняє календарну добу (days: 1) й абсолютний час (hours: 24) і сам змінює UTC-зсув.
ZonedDateTime · add({days:1}) vs add({hours:24})
Оберіть сценарій переходу
08
Вбудоване сортування
Для Date потрібно вручну переводити в getTime(). Temporal дає статичний PlainDate.compare, який передається в sort() напряму.
Legacy Date
копіюватиdates.sort((a, b) => a.getTime() - b.getTime());
Натисніть кнопку
Temporal
копіюватиdates.sort(Temporal.PlainDate.compare);
Натисніть кнопку
Підтримка в браузерах
Temporal — частина ES2026 і вже котиться в двигуни (SpiderMonkey/Firefox — за прапорцем, реалізації в V8/JSC — у процесі). Ця сторінка працює через офіційний поліфіл @js-temporal/polyfill, тож усе виконується прямо у вашому браузері. Актуальний статус: MDN · TC39 docs.