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

Хочешь уверенно проходить IT-интервью?

Мы понимаем, как сложно подготовиться: стресс, алгоритмы, вопросы, от которых голова идёт кругом. Но с AI тренажёром всё гораздо проще.

💡 Почему Т1 тренажёр — это мастхэв?

• Получишь настоящую обратную связь: где затык, что подтянуть и как стать лучше
• Научишься не только решать задачи, но и объяснять своё решение так, чтобы интервьюер сказал: "Вау!".
• Освоишь все этапы собеседования, от вопросов по алгоритмам до диалога о твоих целях.

Зачем листать миллион туториалов? Просто зайди в Т1 тренажёр, потренируйся и уверенно удиви интервьюеров. Мы не обещаем лёгкой прогулки, но обещаем, что будешь готов!

Реклама. ООО «Смарт Гико», ИНН 7743264341. Erid 2VtzqwP8vqy

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

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