Время чтения: Около 6 мин. Веб-разработка

Как работать с датой и временем в JavaScript

Как работать с датой и временем в JavaScript

Встроенный объект Date позволяет производить различные операции с датой-временем в JavaScript, такие как: создание, извлечение, установка, преобразование и форматирование даты и времени.

Начало работы с датой и временем

Для создания объекта Date используется конструктор new Date() с разными аргументами:

  1. Без аргументов — получается объект Date с текущими датой и временем:
let now = new Date();

С одним числовым аргументом — создается объект с временем, которое равно числу миллисекунд, которые прошли с 1 января 1970 года UTC+0:

let Jan01_1970 = new Date(0);
  1. С одним строковым аргументом — объект Date формируется из строки, содержащей дату в одном из форматов, распознаваемых методом Date.parse():
let Jan01_1970 = new Date(0);

С несколькими числовыми аргументами  — конструируется объект Date с указанными компонентами(год, месяц, дата, час, минута, секунда, миллисекунда) в местном часовом поясе:

let date = new Date(2021, 4, 26, 11, 35, 55);
UTC (англ. «Coordinated Universal Time») — это стандарт времени, который используется во всем мире для синхронизации часов. Время UTC является точкой отсчета для всех временных зон.

Методы для получения компонентов даты-времени:

  1. getFullYear() — год (4 цифры)
  2. getMonth() — месяц (с 0 до 11)
  3. getDate() — день месяца (с 1 до 31)
  4. getHours() — час (с 0 до 23)
  5. getMinutes() — минута (с 0 до 59)
  6. getSeconds() — секунда (с 0 до 59)
  7. getMilliseconds() — миллисекунда (с 0 до 999)
  8. getTime() — количество миллисекунд, прошедших с полуночи 1 января 1970 года до настоящего времени

Работа с компонентами

Чтобы поменять отдельные компоненты даты-времени, используйте методы установки:

  1. setFullYear(год, месяц, день) — год
  2. setMonth(месяц, день) — месяц
  3. setDate(день) — день месяца
  4. setHours(час, минута, секунда, миллисекунда) — час
  5. setMinutes(минута, секунда, миллисекунда) — минута
  6. setSeconds(секунда, миллисекунда) — секунда
  7. setMilliseconds(миллисекунда) — миллисекунда

*Жирным шрифтом указаны обязательные параметры, курсивом — дополнительные.

Как получить из строки дату и как указать временную зону?

Для получения объекта Date из строки, содержащей дату в одном из стандартных форматов, используется конструктор new Date(строка) или метод Date.parse(строка), который возвращает таймстамп[1]:

// В конструктор new Date передается строка в формате ISO 8601 
let wedding_day = new Date("2022-02-22T22:02:02+06:00");
console.log(wedding_day);
// Tue Feb 22 2022 22:02:02 GMT+0300 (Москва, стандартное время)

// Строка в формате RFC 2822
let birthday_son = "28 May 2021 13:50:48 GMT+0300";

// Получаем таймстамп из строки даты
const timestamp = Date.parse(birthday_son);
console.log(timestamp) // 1622199048000

// Создаем объект из таймстампа
const date = new Date(timestamp);
console.log(date)
//Fri May 28 2021 13:50:48 GMT+0300 (Москва, стандартное время)

Временная зона указывается с помощью суффикса Z (обозначение UTC) или смещения от UTC в формате ±hh:mm, например:

// Время по UTC
let open_day = new Date("2023-05-28T11:35:55Z")
console.log(vacation_day)
// Wed May 28 2023 14:35:55 GMT+0300 (Москва, стандартное время)
// Время по Москве
let open_day = new Date("2023-05-28T11:35:55+03:00")
console.log(open_day)
// Wed May 28 2023 11:35:55 GMT+0300 (Москва, стандартное время)
// Время по Париж
let open_day = new Date("2023-05-28T11:35:55+02:00")
console.log(open_day)
// Wed May 28 2023 12:35:55 GMT+0300 (Москва, стандартное время)

Если временная зона не указана в строке, то используется местная временная зона.

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

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

// Создание объекта Date с текущими датой и временем
let now = new Date();
console.log(now);
// Mon May 08 2023 23:43:36 GMT+0300 (Москва, стандартное время)

Для сравнения двух дат используются операторы сравнения (>, <, ==, !=) или метод getTime():

// Создание объекта Date из строки
let first_date = new Date("2023-09-20T12:35:20+03:00")
// Создание объекта Date из компонентов
let last_date = new Date(2023, 11, 30, 14, 36, 56)
// Сравнение дат с помощью операторов сравнения
console.log(first_date > last_date) // false
console.log(first_date < last_date) // true
console.log(first_date == last_date) // false
console.log(first_date != last_date) //  true
// Сравнение дат с помощью метода getTime()
console.log(first_date.getTime() > last_date.getTime()) // false
console.log(first_date.getTime() < last_date.getTime()) // true
console.log(first_date.getTime() == last_date.getTime()) // false
console.log(first_date.getTime() != last_date.getTime()) // true

Стоит помнить, что две даты с одинаковыми компонентами могут быть не равными, если они имеют разные часовые пояса. В примере выше first_date имеет часовой пояс +03:00, а last_date имеет местный часовой пояс. Для того чтобы сравнить даты по UTC используется метод toUTCString():

let date_moscow = new Date("2023-09-20T12:35:20+03:00");
let date_paris = new Date("2023-09-20T11:35:20+02:00");
console.log(date_moscow.toUTCString() == date_paris.toUTCString()); // true

Форматирование даты

Для вывода даты в соответствии с местным временем и языком применяется метод toLocaleString() с аргументами locales и options, которые позволяют приложениям определить тип форматирования даты:

let date = new Date(2023, 4, 20, 45, 30);
//Выводим местные дату и время без дополнительных параметров
console.log(date.toLocaleString());
//21.05.2023, 21:30:00
//Выводим различные стандарты даты и времени, используя параметр locales
//Россия
console.log(date.toLocaleString("ru-RU"));
// 21.05.2023, 21:30:00
//Китай
console.log(date.toLocaleString("zh-CN"));
// 2023/5/21 21:30:00
//Америка
console.log(date.toLocaleString("en-US"));
// 5/21/2023, 9:30:00 PM

Использование параметра options помогает скорректировать общие настройки, например, когда для США нужен 24 часовой формат времени:

//Выводим Американские стандарты даты и времени c параметром options
console.log(date.toLocaleString("en-US", { hour12: false }));
// 5/21/2023, 21:30:00

Можно задать свои параметры форматирования в виде объекта таким образом:

let options = {
    weekday: "short", // день недели в коротком формате
    year: "numeric", // год в числовом формате
    month: "long", // месяц в длинном формате
    day: "numeric", // день в числовом формате
    hour: "2-digit", // часы в двузначном формате
    minute: "2-digit" // минуты в двузначном формате
};

// Выводим дату с кастомными параметрами в Американском стиле
console.log(date.toLocaleString("en-US", options));
// Sun, May 21, 2023 at 09:30 PM

// Выводим дату с кастомными параметрами в Китайском стиле
console.log(date.toLocaleString("zh-CN", options));
// 2023年5月21日周日 21:30

Как использовать библиотеку Day.js для работы с датой и временем

Day.js — это легковесная JavaScript библиотека, которая предоставляет удобные методы для парсинга, валидации, манипулирования и отображения дат и времени. Она имеет тот же API, что и популярная библиотека Moment.js, но весит всего 2 КБ и поддерживает иммутабельность[2] и интернационализацию[3].

Day.js подключается в проект через CDN или устанавливается с помощью менеджеров пакетов, таких как:

  1. npm — командой npm install dayjs --save
  2. yarn — командой yarn add dayjs

После подключения библиотеки cоздаются объекты Day.js с помощью функции dayjs() с нужными аргументами:

  • Без аргументов — получается объект Day.js с текущими датой и временем:
let now = dayjs();
  • С одним числовым аргументом — объект Day.js с временем, равным числу миллисекунд, которые прошли с 1 января 1970 года UTC+0:
let Jan01_1970 = dayjs(0);
c

С одним строковым аргументом — объект Day.js из строки, содержащей дату в одном из форматов, распознаваемых методом Date.parse():

let date = dayjs("2021-05-26");

С одним объектом Date — объект Day.js, полученный из объекта Date:

let date = dayjs(new Date(2021, 4, 26));

Методы для получения и установки компонентов даты-времени:

  1. year() — год (4 цифры)
  2. month() — месяц (от 0 до 11)
  3. date() — день месяца (с 1 до 31)
  4. hour() — час (с 0 до 23)
  5. minute() — минута (с 0 до 59)
  6. second() — секунда (с 0 до 59)
  7. millisecond() — миллисекунда (с 0 до 999)
  8. valueOf() — количество миллисекунд, прошедших с полуночи 1 января 1970 года до настоящего времени (таймстамп).

Пример использования Day.js:

// Создание объекта Day.js из строки
let date = dayjs("2023-02-23T10:23:00+03:00");
// Получение любого, необходимого компонента даты-времени
console.log(date.year()) // 2023
console.log(date.valueOf()) // 1677136980000
// Установка нового значения для компонента
date.year(2024); // 2023 год поменялся на 2024
// Вывод даты в формате ISO 8601
console.log(date.format()) // 2023-02-23T10:23:00+03:00

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

Для более гибкого и настраиваемого форматирования даты-времени в соответствии с разными языками применяется метод Intl.DateTimeFormat(), который является частью интернационализационного API JavaScript.

Для использования этого метода создается объект Intl.DateTimeFormat с необходимыми параметрами, а затем вызвается его метод format() с аргументом, содержащим объект Date или таймстамп:

// Создание объекта Date
let date = new Date(2023, 9, 30, 11, 35, 55);
// Создание объекта Intl.DateTimeFormat с параметрами locales и options
let formatter = new Intl.DateTimeFormat("en-US", {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
hour: "numeric",
minute: "numeric",
});
// Вывод отформатированной даты
console.log(formatter.format(date));
// Saturday, October 30, 2023, 11 AM

Метод formatToParts() возвращает массив объектов, содержащих отдельные части отформатированной даты и их типы:

// Вывод массива частей даты
console.log(formatter.formatToParts(date));
// [
//     {type: “weekday”, value: “Saturday”},
//    {type: ”literal”, value: “,”},
//    {type: “month”, value: ”October”},
//    {type: “literal”, value: ” ”},
//    {type: “day”, value: ”30”},
//    {type: “literal”, value: ”,”},
//    {type: “year”, value: ”2023”},
//    {type: “literal”, value: ”,”},
//    {type: “hour”, value: ”11”},
//    {type: “literal”, value: ”AM”},
//]

[1] Таймстамп (англ. «‎timestamp») — это значение, которое указывает на конкретный момент времени в формате даты и времени. Он представляет собой количество секунд (или миллисекунд) с начала Эпохи (Unix time), которая начинается 1 января 1970 года 00:00:00 UTC.

[2] Иммутабельность (англ. «‎immutable») — неизменяемость объектов после их создания. Любые изменения объекта приводят к созданию нового объекта с новым состоянием.

[3] Интернационализация (англ. «internationalization» или «i18n») —  это процесс адаптирования программного обеспечения для использования в разных культурных и языковых средах, например: поддержка разных языков, форматов даты и времени, валют, числовых форматов.

Elbrus Bootcamp