☕ Учебник по JavaScript: работа с датой и временем

Разбираемся в стандартных функциях для работы с датой и временем в JavaScript, пробуем разные манипуляции и форматы вывода, а также знакомимся с библиотекой Day.js.

Создание даты

Для получения даты используется объект Date. Существует четыре способа создания объекта даты и времени:

• new Date() – создание объекта с текущей датой и временем без указания параметров.

let date = new Date();
console.log(date); // 2022-05-25T05:09:41.041Z

• new Date(value) – с передачей параметра value, который показывает количество миллисекунд, прошедших с 1 января 1970 г. GMT+0.

let date = new Date(3600*24*1000);
console.log(date); // 1970-01-02T00:00:00.000Z

• new Date(string) – параметр string содержит дату в формате строки. Передаваемая строка должна соответствовать стандартным форматам ISO 8601 или RFC 2822. Подробнее о формате ISO 8601 на странице (вики) и о RFC 2822 на странице (англ.).

let date_string_1 = new Date('2022-05-25 9:00');
console.log(date_string_1); // 2022-05-25T09:00:00.000Z

let date_string_2 = new Date('25 May 2022 13:30:00 GMT');
console.log(date_string_2); // 2022-05-25T13:30:00.000Z

• new Date(year, month, day, hour, minutes, seconds) – создание объекта с набором необязательных параметров: year – целое четырехзначное число, month – число от нуля (январь) до одиннадцати (декабрь), day, hour, minutes, seconds – целые числа.

let date_1 = new Date(2022,4,25);
console.log(date_1); // 2022-05-25T00:00:00.000Z

let date_2 = new Date(2022,4,32);
console.log(date_2); // 2022-06-01T00:00:00.000Z

В JS поддерживается проверка ввода дней, часов, минут, секунд и миллисекунд.

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

Получение отдельных компонентов даты и времени возможно с помощью следующих методов:

• getFullYear() – получение четырехзначного значения года;
• getMonth() – получение значения месяца от 0 (январь) до 11 (декабрь);
• getDate() – получение числа дня в месяце;
• getHours() – количество часов;
• getMinutes() – количество минут;
• getDay() – получение номера дня недели от нуля (воскресенье) до шести (суббота);
• getTime() – получение количества миллисекунд, прошедших с 1 января 1970 г. UTC.

let date = new Date(2022,4,25,13,30);

console.log(date.getFullYear()); // 2022
console.log(date.getMonth()); // 4
console.log(date.getDate()); //25
console.log(date.getHours()); // 13
console.log(date.getMinutes()); // 30
console.log(date.getDay()); // 3
console.log(date.getTime()); // 1653485400000

Установка отдельных компонентов даты и времени

Для установки отдельных компонентов используются методы:

• setFullYear(year) – для установки года, где year – четырехзначное число;
• setMonth(month) – для установки месяца от 0 до 11;
• setDate(date) – число месяца, date – целое число;
• setHours(hours) – часы, где hours – целое число;
• setMinutes(minutes), setSeconds(seconds), setMilliseconds(milliseconds) – для установки минут, секунд, миллисекунд, где параметры minutes, seconds, milliseconds – целые числа;
• setTime(milliseconds) – устанавливает в соответствии с параметром миллисекундами – milliseconds, прошедших с 1 января 1970 г. UTC.

let date = new Date(2022,4,25,13,30);

date.setFullYear(2021);
date.setMonth(3);
date.setDate(12);
date.setHours(12);
date.setMinutes(15);

console.log(date);
//2021-04-12T12:15:00.000Z

Как получить из даты строку?

Чтобы получить из объекта даты строку, используются два типа методов.

Для даты в часовом поясе UTC:

• toString() – получение полной строки даты и времени;
• toDateString() – строка только с указанием даты и дня недели;
• toTimeString() – только время;
• toISOString() – преобразование строки в формат ISO.

Перечисленные методы возвращают представление даты во временной зоне UTC:

let date = new Date(2022,4,25,11,35,22,434);

console.log(date.toString());
// Wed May 25 2022 11:35:22 GMT+0000 (GMT)

console.log(date.toDateString());
//Wed May 25 2022

console.log(date.toTimeString());
//11:35:22 GMT+0000 (GMT)

console.log(date.toISOString());
//2022-05-25T11:35:22.434Z

Для получения даты локального часового пояса и языка:

• toLocaleString(locales, options) – дата и время в виде строки локали;
• toLocaleDateString(locales, options) – строка только из даты;
• toLocaleTimeString(locales, options) – получение только времени.

Методы возвращают значение даты с учетом локального часового пояса и языка. Параметры locales, options – необязательные.

let date = new Date(2022,4,25,11,35,22);

console.log(date.toLocaleString());
// 25.05.2022, 11:35:22

console.log(date.toLocaleDateString());
// 25.05.2022

console.log(date.toLocaleTimeString());
// 11:35:22

Без указания параметров будет использован установленный часовой пояс и язык на компьютере. Подробнее об этих аргументах ниже – в разделе «Метод Intl.DateTimeFormat()».

Как получить из строки дату?

Метод Date.parse(string) принимает на вход строку в формате RFC2822 или ISO, а возвращает количество миллисекунд, прошедших с 1 января 1970 г. UTC.

let date = Date.parse('2022-05-25T11:00:00');

console.log(date);
//1653476400000

console.log(new Date(date));
//2022-05-25T11:00:00.000Z

Примечание: неявный вызов метода parse() используется в конструкторе с параметром строки: new Date(dateString).

Как указать временную зону?

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

Создание с добавлением +-hhmm выглядит так: new Date('May 25, 2022 11:10:00 +03:00').

let date = new Date('May 25, 2022 11:30 +03:00')
console.log(date); // 2022-05-25T08:30:00.000Z

Как получить текущее время?

Для того чтобы получить текущую дату и время, используйте создание Date с пустым конструктором: new Date();

let date = new Date();
console.log(date); // 2022-05-25T11:00:00.000Z

Обратите внимание, что метод возвращает время в часовом поясе UTC.

Для получения даты в миллисекундах используется метод Date.now() без создания объекта.

console.log(Date.now()); // 1653476400000

Как сравнить две даты?

Для сравнения используется метод приведения даты к миллисекундам – getTime():

let date_1 = new Date('May 20, 2022');
let date_2 = new Date('May 25, 2022');

console.log(date_2.getTime() === date_1.getTime());
// false

date_1.setDate(25);

console.log(date_2.getTime() === date_1.getTime());
// true

Как альтернативный вариант, но не самый лучший – приведение двух дат к строкам с помощью методов получения строки и дальнейшее сравнение:

let date_1 = new Date('May 25, 2022');
let date_2 = new Date('May 25, 2022');

console.log(date_2.toString() === date_1.toString());

Примечание: будьте осторожны, отличие хоть на секунду вернет при сравнении false.

Форматирование даты в соответствии с разными языками

Для вывода даты в соответствии с местным временем используются стандартные функции. Что делать, если необходима поддержка и другого формата? Объект Intl – предоставляет функции сравнения строк в разных языковых форматах, форматирования чисел и дат со временем.

Метод Intl.DateTimeFormat() для вывода строк в разных языковых форматах

Создание объекта: new Intl.DateTimeFormat(locales, options), где:

• locales – необязательный параметр. Строка или массив из трех компонентов, которые содержит код языка, код способа записи и код страны. Например, указание может состоять: ru – русский язык, en-GB – английский язык- Англия (GB), en-US – английский язык – США US. Больше языков приведено на сайте (англ.).
• options – необязательный параметр. Объект дополнительных настроек. Содержит следующие поля:
• localeMatcher – алгоритм сопоставления локалей, принимает значения: lookup, best fit – по умолчанию.
• timeZone – указание часового пояса, значение по умолчанию – часовой пояс по умолчанию среды выполнения.
• hour12 – использование 12-часового формата времени, значения: true, false. По умолчанию устанавливается использование формата локального времени.
• formatMatcher – алгоритм сопоставления форматов, значения: basic, best fit – по умолчанию.
  Дальнейший перечень свойств, которые описывают компоненты даты и времени, используемые в форматированном выводе, и желаемые представления показаны на странице. Их использование необязательно.

Создание даты в локальном формате:

let date = new Date('May 25, 2022 13:30:00');
console.log(new Intl.DateTimeFormat().format(date));
// 25.05.2022

C использованием параметра locales:

let date = new Date();
console.log(new Intl.DateTimeFormat('en-Us').format(date));
// 5/25/2022 

Использование библиотеки Day.js

Компактная библиотека JavaScript для работы с датой и временем. Day.js содержит функции разбора строки, валидации, преобразования форматов, разных видов манипуляций и сравнения двух дат.

Библиотека работает в современных браузерах, поэтому для работы достаточно вставить перед тегом </body>:

<script src="<https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.8.17/dayjs.min.js>"></script>

Примеры работы с библиотекой:

• Создание объекта даты:

let date = dayjs('May 25, 2022 11:35:55 +0300');
console.log(date.format());
// 2022-05-25T11:35:55+03:00

• Установка отдельных компонент даты и времени:

let date = dayjs('May 25, 2022 11:35:55 +0300');

date = date.add(2,'day');
date = date.add(1,'hour');
date = date.add(5,'minute');

console.log(date.format());
// 2022-05-27T12:40:55+03:00

• Сравнение двух дат:

let date_old = dayjs('May 25, 2022 11:35:55 +0300');

let date_new = date_old.add(2,'day');

console.log(date_new.isAfter(date_old));// true

Полную документация по использованию библиотеки смотрите на официальном сайте библиотеки.

Материалы по теме

• ☕ Что в коробке? Как работают функции в JavaScript
• ☕ 5+5=? Преобразование значений в строку или число в JavaScript
  
• ☕ 40 основных и нестандартных методов для работы со строками в JavaScript