В этом посте хочу затронуть тему работы с датами в Javascript, которая, при первом приближении, может показаться сложной.

Для работы с датами Javascript предоставляет разработчикам встроенный функционал в виде объекта Date.

Экземпляр объекта Date - это момент времени. Методы объекта позволяют управлять не только датами, но и временем.

Рассмотрим 4 способа создать новый объект Date.

1. Использовать конструктор new Date() без передачи дополнительных параметров

Для создания нового объекта Date требуется вызвать конструктор:

1new Date();
2// Wed Sep 23 2020 12:59:15 GMT+0300 (Москва, стандартное время)

Это позволит нам получить новый экземпляр объекта Date, содержащий текущий момент времени.

В качестве нулевой (базовой) даты, Javascript использует 1 Января 1970 00:00:00 UTC. Текущий момент времени - количество миллисекунд, прошедших с нулевой даты.

2. Использовать конструктор new Date() с передачей временной метки, выраженной в миллисекундах

Вероятно, вы сталкивались с временной меткой Unix, которая использует ту же нулевую дату, но представлена не в миллисекундах, а секундах.

Мы можем передать временную метку Unix в объект Date и получить соответствующий момент времени следующим образом:

1const unixTimeStamp = 1600855031;
2new Date(unixTimeStamp * 1000);
3// Wed Sep 23 2020 12:57:11 GMT+0300 (Москва, стандартное время)

Если мы передадим 0 в объект Date, то получим нулевую дату 1 Января 1970.

1new Date(0);
2// Thu Jan 01 1970 03:00:00 GMT+0300 (Москва, стандартное время)

Можно также использовать встроенный метод Date.now(), чтобы получить текущую временную метку в миллисекундах и передать ее в объект Date.

1Date.now();
2// 1600855352116
3new Date(1600855352116);
4// Wed Sep 23 2020 13:02:32 GMT+0300 (Москва, стандартное время)

3. Передать дату в объект Date - в формате строки

Мы также можем использовать строчные выражения для передачи в объект Date и получения соответствующего момента времени. В этом случае в объекте Date будет автоматически использоваться метод parse для определения даты и времени, которые мы в него передаем.

1new Date('2020-09-20');
2// Sun Sep 20 2020 03:00:00 GMT+0300 (Москва, стандартное время)
3
4new Date('2020/09/20');
5// Sun Sep 20 2020 00:00:00 GMT+0300 (Москва, стандартное время)
6
7new Date('September 20, 2020');
8// Sun Sep 20 2020 00:00:00 GMT+0300 (Москва, стандартное время)
9
10new Date('20 September 2020');
11// Sun Sep 20 2020 00:00:00 GMT+0300 (Москва, стандартное время)
12
13new Date('September 2020');
14// Tue Sep 01 2020 00:00:00 GMT+0300 (Москва, стандартное время)
15
16new Date('2020 September');
17// Tue Sep 01 2020 00:00:00 GMT+0300 (Москва, стандартное время)
18
19new Date('2020-09');
20// Tue Sep 01 2020 03:00:00 GMT+0300 (Москва, стандартное время)

Также есть возможность использовать метод Date.parse(), который возвращает временную метку в миллисекундах.

1new Date('September 20, 2020');
2// Sun Sep 20 2020 00:00:00 GMT+0300 (Москва, стандартное время)
3
4Date.parse('September 20, 2020');
5// 1600549200000

4. Передать набор параметров в объект Date

Еще один способ создать новый экземпляр объекта Date – передать в него набор значений, соответствующих году, месяцу (первый месяц равен 0), дню, часу, минутам, секундам и миллисекундам.

1new Date(2020, 8, 20, 18, 30, 10, 0);
2// Sun Sep 20 2020 18:30:10 GMT+0300 (Москва, стандартное время)

Во всех случаях, указанных выше, мы получаем дату, привязанную к временной зоне нашего компьютера. То есть, используя одинаковые входные данные на разных компьютерах, можно получить разные результаты.

Javascript использует UTC в качестве базовой временной зоны, и производит автоматическую конверсию в локальную временную зону вашего компьютера.

Как Поменять Временную Зону?

У нас есть 2 варианта изменения временной зоны при создании нового экземпляра объекта Date:

• Использование формата “+Часы”

1new Date('January 20, 2020 11:10:05 +0700');

• Передать название временной зоны в скобках

1new Date('January 20, 2020 11:10:05 (CET)');

Важно учитывать, что, если во 2-м случае вы передадите название временной зоны в неверном формате, Javascript автоматически будет использовать зону UTC. При этом вы не получите сообщения об ошибке.

В первом случае, при передаче часов в неверном формате, Javascript оповестит вас ошибкой “Invalid Date”.

Объект Date: Форматирование

Объект Date содержит ряд методов, которые возвращают дату и время в формате строки:

1const date = new Date('September 20, 2020 11:10:05');
2
3date.toString();
4// "Sun Sep 20 2020 11:10:05 GMT+0300 (Москва, стандартное время)"
5
6date.toTimeString();
7// "11:10:05 GMT+0300 (Москва, стандартное время)"
8
9date.toDateString();
10// "Sun Sep 20 2020"
11
12date.toUTCString();
13// "Sun, 20 Sep 2020 08:10:05 GMT"
14
15date.toISOString();
16// "2020-09-20T08:10:05.000Z"
17
18date.toLocaleTimeString();
19// "11:10:05"
20
21date.toLocaleString();
22// "20.09.2020, 11:10:05"

Javascript: Текущая дата и время (все методы получения)

Для получения значений даты и времени используются следующие методы:

1const date = new Date('September 20, 2020 11:10:05');
2
3date.getTime();
4// 1600589405000
5
6date.getFullYear();
7// 2020
8
9date.getDate();
10// 20
11
12date.getDay();
13// 0 (0 – означает Воскресенье, 1 - Понедельник)
14
15date.getMonth();
16// 8 (0 - Январь)
17
18date.getHours();
19// 11
20
21date.getMinutes();
22// 10
23
24date.getSeconds();
25// 5
26
27date.getMilliseconds();
28// 0
29
30date.getTimezoneOffset();
31// -180 (указана разница между локальным и UTC временем в минутах)

Также есть возможность сразу получать значения даты и времени привязанных не локальной зоне компьютера пользователя, а к зоне UTC.

1date.getUTCFullYear();
2// 2020
3
4date.getUTCDate();
5// 20
6
7date.getUTCDay();
8// 0
9
10date.getUTCMonth();
11// 8 (0 - Январь)
12
13date.getUTCHours();
14// 8 – Отличается от значения полученного в локальной временной зоне
15
16date.getUTCMinutes();
17// 10
18
19date.getUTCSeconds();
20// 5
21
22date.getUTCMilliseconds();
23// 0 (0 – значение не указано)

Установка Компонентов Даты и Времени

Для установки отдельных компонентов даты или времени можно использовать следующие методы:

1const date = new Date('September 20, 2020 11:10:05');
2
3// 1. Установка новой даты
4date.setDate(22);
5// 1600762205000 - получаем новую временную метку
6
7// 2. Передадим новую метку в объект Date и получим значение с обновленной датой
8const newDate = new Date(1600762205000);
9// Tue Sep 22 2020 11:10:05 GMT+0300 (Москва, стандартное время)

Другие методы установки отдельных компонентов объекта Date:

1// используется вместо устаревшего метода setYear()
2date.setFullYear(новое значение)
3date.setMonth(month)
4date.setHours(hour)
5date.setMinutes(min)
6date.setSeconds(sec)
7date.setMilliseconds(ms)
8date.setTime(ms)

Методы setHours(), setMinutes() и setSeconds() помимо базовых значений принимают значения минут, секунд или миллисекунд для более точных установок. Формат ввода выглядит следующим бразом:

1setHours(18, 45, 20, 10);
2setMinutes(min, sec, ms);
3setSeconds(sec, ms);

Стоить помнить, что если мы укажем обновленное значение часов следующим образом date.setHours(72), то это приведет к обновлению нашей даты (прибавится 3 дня).

Как Получить Текущее Время из Объекта Javascript Date?

Для получения текущего времени, выраженного в миллисекундах можно использовать метод Date.now() вместо более длинного варианта new Date().getTime().

Форматирование Даты и Времени в Соответствии с Разными Языками

API Интернационализации (Internationalization API) используется для форматирования даты и времени в соответствии с нужным языком.

В качестве примера, можно привести различия в формате написания дат в России (первым идет день - 31.01.2020) и США (первым идет месяц - 01.31.2020).

Все методы интернационализации дат, времени, а также других единиц (валют) доступны в объекте Intl.

Метод Intl.DateTimeFormat()

В этом посте нас интересует метод Intl.DateTimeFormat(), который используется для форматирования даты и времени.

Рассмотрим следующий пример:

Давайте получим дату в локальном формате:

1const date = new Date('September 20, 2020 11:10:05');
2new Intl.DateTimeFormat().format(date);
3// "20.09.2020"

Теперь получим дату в формате, который используется в США. Для этого используем параметр en-Us (английский язык, используемый в США (US)):

1const date = new Date('September 20, 2020 11:10:05');
2new Intl.DateTimeFormat('en-Us').format(date);
3// "9/20/2020"

Как Сравнить 2 Даты

Самый простой способ сравнить 2 даты – использовать метод Date.getTime().

1const date1 = new Date('September 20, 2020 11:10:05');
2const date2 = new Date('September 25, 2020 11:10:05');
3
4const difference = date2.getTime() - date1.getTime();
5// 432000000 – получаем разницу в миллисекундах

Также для сравнения дат можно использовать условия if:

1if (date2.getTime() === date1.getTime()) {
2  console.log('даты равны');
3  // даты равны
4}

Использование Библиотеки Moment.js

Moment.js - одна из самых популярных библиотек для работы с датой и временем в Javascript.

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

Сначала устанавливаем пакет с помощью команды npm install moment.

1// 1. Импортируем установленный пакет:
2import moment from ‘moment’;
3
4// 2. Получаем текущую дату и время:
5const date = moment();
6
7// 3. Мы можем инициализировать новый объект moment,
8// передав в него строку с датой и временем
9const date = moment('September 20, 2020');
10
11// 4. Далее можно вывести дату и время в нужном формате:
12const date = moment().format('MM Do, YYYY');

Список опций форматирования доступен в документации библиотеки (пара примеров):

• YYYY-MM-DD - 2017-12-14
• HH:mm:ss - 16:34:10

Один из методов библиотеки, которые часто приходится использовать – fromNow(), который возвращает количество времени, которое прошло с указанной даты.

1moment('2020-06-20').fromNow();
2// 3 месяца назад

Я использую этот метод для отображения времени, которое прошло с даты публикации постов в блоге.