Share This
Связаться со мной
Крути в низ
Categories
//Работа с датой и временем в JS

Работа с датой и временем в JS

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

rabota s datoj i vremenem v js bf2df67 - Работа с датой и временем в 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

  • 0 views
  • 0 Comment

Leave a Reply

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Свежие комментарии

    Рубрики

    About Author 01.

    blank
    Roman Spiridonov

    Моя специальность - Back-end Developer, Software Engineer Python. Мне 39 лет, я работаю в области информационных технологий более 5 лет. Опыт программирования на Python более 3 лет. На Django более 2 лет.

    Categories 05.

    © Speccy 2022 / All rights reserved

    Связаться со мной
    Close