Разбираемся в стандартных функциях для работы с датой и временем в 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