Работа с датой и временем в JavaScript. Объект класса Date. Полная инструкция

В этом уроке уроке рассмотрим работу с датой и временем в JavaScript. Как создавать текущую дату, вывод времени в JS: как получить год, месяц, дату, часы и минуты.

— Как отформатировать время в JS.
— Что такое UTC и GMT.
— Как форматировать время с помощью toLocaleDateString(),
— В чем передавать дату и время через Fetch,
— метод toISOString().

Приглашаю к просмотру видео урока или посмотреть его текстовую версию ниже.

Создание времени

Чтобы создать объект даты и времени, достаточно воспользоваться классом Date. При создании нового объекта времени — создается объект с текущей датой и временем.

Создать текущее время и дату:

// Текущее время
let now = new Date();

Также при создании объекта Date можно передать набор аргументов — год, месяц (0 — Январь, 11 — Декабрь), число, часы, минуты, секунды, миллисекунды.

// Передать набор аргументов
let d = new Date(2022, 8, 2, 11, 30, 0, 0)
console.log(d); // Fri Sep 02 2022 11:30:00 GMT+0300 (Москва, стандартное время)

Также можно передать дату и время ы более свободном формате, в виде строки. При этом конструктор постарается распарсить строчку чтобы понять указанную в ней дату и время:

let d;

// Передать дату и время в виде строки
d = new Date('2020-09-02');
d = new Date('2020/09/02');
d = new Date('September 02, 2020');
d = new Date('September 02, 2020 15:10:05 +5');
d = new Date('September, 2020');
d = new Date('2020 September');
d = new Date('2020');

Еще создать дату можно на основе временной метки timestamp:

let d = new Date(1643047926524)

И на основе ISO строки:

let d = new Date("2022-01-01T07:15:00.000Z")

Форматирование времени. Метод toLocaleString()

Самый простой и быстрый способ вывести отформатированную дату и время, отдельно дату или отдельно время — это использовать метод .toLocaleString()

// Текущее время
let d = new Date();
console.log(d); // Wed Jan 26 2022 18:47:03 GMT+0300 (Москва, стандартное время)

// Метод toLocaleString()
console.log(d.toLocaleString("ru-RU")); // 26.01.2022, 18:47:03
console.log(d.toLocaleDateString("ru-RU")); // 26.01.2022
console.log(d.toLocaleTimeString("ru-RU")); // 18:47:03

Получение timeStamp временной метки в милисекундах

d.getTime()

Получение отдельных компонентов времени

С помощью специальных методов мы можем получать отдельные компоненты даты и времени. Можно получить год, месяц, часы, минуты, секунды, миллисекунды.

d.getTime()
d.getFullYear() 
d.getDate()
d.getDay() 
d.getMonth() 
d.getHours()
d.getMinutes()
d.getSeconds()
d.getMilliseconds()

Собственная функция форматирования времени

Получение отдельных компонентов времени может пригодится вам для написания собственных функций форматирования времени.

Напишем функцию чтобы получать время в формате 24.01.2022, 14:15

// Текущее время
let d = new Date();
console.log(d); // Wed Jan 26 2022 18:41:50 GMT+0300 (Москва, стандартное время)

// 24.01.2022, 14:15
function formatTime(d){
	const date = d.getDate().toString().padStart(2, "0");
	const month = (d.getMonth() + 1).toString().padStart(2, "0");
	const year = d.getFullYear();

	const h = d.getHours().toString().padStart(2, "0");
	const m = d.getMinutes().toString().padStart(2, "0");

	return `${date}.${month}.${year}, ${h}:${m}`
}

console.log(formatTime(d)); // 26.01.2022, 18:41

На основе предыдущей функции, напишем ещё одну, которая будет выводить время в формате Напишем функцию чтобы получать время в формате Пн, 24 января 2022, 16:12

// Текущее время
let d = new Date();
console.log(d); // Wed Jan 26 2022 18:41:50 GMT+0300 (Москва, стандартное время)

// Пн, 24 января 2022, 16:12
function formatRusTime(d){
	const day = d.getDay(); // 0 - 6
    const dayTitle = ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];

	const date = d.getDate().toString().padStart(2, "0");

	const month = d.getMonth(); // 0 - 11
    const monthTitle = [ 'января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'];

	const year = d.getFullYear();

	const h = d.getHours().toString().padStart(2, "0");
	const m = d.getMinutes().toString().padStart(2, "0");

	return `${dayTitle[day]}, ${date} ${monthTitle[month]} ${year}, ${h}:${m}`
}

console.log(formatRusTime(d)); // Ср, 26 января 2022, 18:41

Изменение отдельных компонентов времени

С помощью специальных методов мы можем изменять отдельные компоненты даты и времени. Можно менять год, месяц, часы, минуты, секунды, миллисекунды.

d.setFullYear(year)
d.setMonth(month)
d.setHours(hour)
d.setMinutes(min)
d.setSeconds(sec)
d.setMilliseconds(ms)

Также можно более точно указывать часы, минуты и секунды:

d.setHours(hours, min, sec, ms);
d.setMinutes(min, sec, ms);
d.setSeconds(sec, ms);

Автоисправление. Добавление времени

При работе с датой и временем объект Date умеет делать автоисправление. Например если мы указали количество часов больше чем 24, то «лишние» часы не пропадут а перейдут на другой день и дата увеличится на 1 день.

let d = new Date('01 January 10:00');

// Устанавливаем кол-во часов на 30, было 10. Лтшние 6 часов перейдут на следующий день
d.setHours(30);

// Получим 02 Января 06:00
console.log(d); // Tue Jan 02 2001 06:00:00 GMT+0300 (Москва, стандартное время)

Благодаря этому можно делать добавление времени, например указать сколько нужно добавить «часов» к текущему времени:

let d = new Date();
console.log(d);

// Добавляем 10 часов, указывая что часы = текущие часы + 10
d.setHours(d.getHours() + 10);
console.log(d);

Сравнение времени

Чтобы сравнить время в двух объектах типа Date, необходимо сравнивать не сами объекты, а их timestamp:

let d1 = new Date('September 20, 2020');
let d2 = new Date('September 20, 2020');

// false, потому что это два разные объекта
console.log(d1 === d2);

// true, так как сравниваем время в милисекундах
console.log(d1.getTime() === d2.getTime());

Разность времени

Можно узнать разность дат и времени. Для этого необходимо получить временные метки для обоих дат:

let d1 = new Date('September 25, 2020');
let d2 = new Date('September 20, 2020');

console.log(d1.getTime() - d2.getTime()); // 432000000

Временная метка timestamp

Timestamp (временная метка) — это целое число равное количеству милисекунд (внимание, в UNIX timestamp исчисляется в секундах), прошедших с полуночи 1 января 1970 года по усреднённому времени Гринвича (т.е. нулевой часовой пояс, точка отсчёта часовых поясов) GMT 0 / UTC 0.

Получить timestamp можно вызвав метод .getTime() на любом объекте класса Date:

let newYear2020 = new Date('January 01, 2020');
console.log(newYear2020); // Wed Jan 01 2020 00:00:00 GMT+0300 (Москва, стандартное время)
console.log(newYear2020.getTime()); // 1577826000000

Можно использовать timestamp при создании новой даты:

let date = new Date(1577826000000);
console.log(date); // Wed Jan 01 2020 00:00:00 GMT+0300 (Москва, стандартное время)

let now = new Date();
console.log(now); // Wed Jan 26 2022 18:28:22 GMT+0300 (Москва, стандартное время)

Также на существующем объекте с датой, можно полностью заменить его дату и время вызвав метод setTime():

now.setTime(1577826000000);
console.log(now); // Wed Jan 01 2020 00:00:00 GMT+0300 (Москва, стандартное время)

Международное время и часовые пояса. UTC и GMT форматы

Рекомендую замечательную статью чтобы узнать про форматы времени, GMT и UTC: https://raznisa.ru/raznica-mezhdu-gmt-i-utc/

Если очень вкратце, то вот несколько тезисов которые вам надо знать о форматах GMT и UTC:

GMT — основано на астрономических наблюдениях

UTC — метод измерения времени с использованием атомных часов

Разница во времени между UTC и GMT составляет доли секунды. Поэтому для общих целей оба времени считаются одинаковыми.

Грубо говоря, мы можем сказать что: UTC = GMT = UTC+0 = GMT+0

Поэтому если где-то вы встречаете формулировку «время по UTC» — то здесь имеется ввиду UTC+0, просто +0 не уточняется.

Хранение времени внутри объектов класса Date

Внутри объектов Date время всегда хранится в виде временной метки Timestamp. Timestamp всегда описывает время по часовому поясу UTC+0.

При выводе времени (например распечатка в консоль), происходит автоматическое форматирование времени в текущий часовой пояс.

Чтобы пояснить, сделаем следующий пример. Создадим время по временной метке 0, то есть ноль секунд прошедших с 1 января 1970 года. При попытке вывода этого времени находясь в часовом поясе GMT+3 (Москва) мы увидим 03:00 часа, потому как GMT+3 имеет разницу в 3 часа по сравнению с UTC+0.

let d = new Date(0); // 01.01.1970 00:00 UTC+0 / GMT
console.log(d); // 01.01.1970 03:00  GMT+3

Еще пример, создадим время по timestamp равному 1 час с 1970 года:

d = new Date(1000 * 60 * 60); // 01.01.1970 01:00  UTC0/GMT0
console.log(d);  // 01.01.1970 04:00  UTC+3/GMT+3

Получим 1 час в UTC+0, и 4 часа при выводе, так как локальное время в браузере GMT+3.

Также мы всегда можем узнать на сколько наша локальная временная зона отличается от зоны UTC+0, для этого есть метод d.getTimezoneOffset(). Он возвращает количество минут на сколько отличается зона UTC от вашей локальной зоны. Запустив его находясь в Москве GMT+3 получим -180 минут.

console.log(d.getTimezoneOffset()); // -180

Международный ISO формат. Метод toISOString()

Существует международный ISO формат времени, выглядит следующим образом: 2022-01-01T07:15:00.000Z Сначала идет дата, после разделитель T, далее время часы, минуты, секунды, и после точки . милисекунды, в конце буква Z. Буква Z означает что время указано в UTC (UTC+0).

Чтобы получить ISO формат времени, необходимо вызвать метод .toISOString();

let d = new Date("01/01/2022 10:15"); // GMT+3
console.log(d.toISOString()); // 2022-01-01T07:15:00.000Z

На основе ISO строки можно создать объект Date:

d = new Date("2022-01-01T07:15:00.000Z")

При конвертации объекта типа Date в JSON строку он автоматически конвертируется в ISOString:

let json = JSON.stringify(d); // "2022-01-01T07:15:00.000Z"

Если сравним, то получим true:

JSON.stringify(d) === JSON.stringify(d.toISOString()) // true

Поэтому можно смело конвертировать объект Date в JSON и сохранять в localStorage или передавать через fetch в API.

localStorage.setItem('time', JSON.stringify(d))