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

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

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

Для получения даты используется объект 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

    

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

***

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

МЕРОПРИЯТИЯ

Комментарии

ВАКАНСИИ

Добавить вакансию
Разработчик C++
Москва, по итогам собеседования

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ