Работа с Датой в JS

1. Класс Date

Работа с промежутками времени - это одна из наиболее популярных задач: часы, календари и прочее. JavaScript предоставляет класс Date, который абстрагирует большую часть работы с датами напрямую. Это позволяет нам представлять моменты во времени и манипулировать ими всего несколькими строками кода.

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

Создание даты очень просто. Просто создайте новый экземпляр встроенного класса Date.

const date = new Date();
console.log(date); // Mon Mar 19 2018 16:51:32 GMT+0200 (FLE Standard Time)
Copy

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

2.1. Datestring

Если передать строку, она будет обработана методом Date.parse(), чтобы вернуть объект Date.

Допустим необходимо создать событие на дату 4 марта 2017 года.

const date = new Date('March 4, 2017');
console.log(date); // Sat Mar 04 2017 00:00:00 GMT+0200 (FLE Standard Time)
Copy

2.2. 7 аргументов

Другой способ создания новых объектов Date — это передать 7 чисел. Эти числа описывают год, месяц, день, час, минуту, секунду и миллисекунду.

new Date(year, month, date, hours, minutes, seconds, ms)
Copy

Последние 4 аргумента необязательны.

const date = new Date(2000, 5, 8, 12, 0, 0, 0);

// Индексы месяцев начинаются с 0, поэтому 5-й месяц это июль.
console.log(date); // Thu Jun 08 2000 12:00:00 GMT+0300 (FLE Daylight Time)
Copy

3. Unix время

В области информатики существует концепция эпохи Unix. Этот момент времени установлен на полночь 1 января 1970 года в часовом поясе UTC.

С учетом этой системы отсчета, если вы передаете число объекту Date, это число представляет собой количество миллисекунд, прошедших с тех пор.

const date = new Date(1000000);
console.log(date); // Thu Jan 01 1970 02:16:40 GMT+0200 (FLE Standard Time)
Copy

Чтобы увидеть число миллисекунд от этой даты до текущего момента, используется статический метод Date.now().

const date = Date.now();
console.log(date); // 1521471595501
Copy

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

4. Методы Date

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

4.1. Геттеры

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

const date = new Date();
console.log('Date: ' + date);

// возвращает день месяца от 1 до 31
console.log('getDate(): ' + date.getDate());

// возвращает день недели от 0 до 6
console.log('getDay(): ' + date.getDay());

// возвращает месяц от 0 до 11
console.log('getMonth(): ' + date.getMonth());

// возвращает год из 4 цифр
console.log('getFullYear(): ' + date.getFullYear());

// возвращает час
console.log('getHours(): ' + date.getHours());

// возвращает минуты
console.log('getMinutes(): ' + date.getMinutes());

// возвращает секунды
console.log('getSeconds(): ' + date.getSeconds());

// возвращает миллисекунды
console.log('getMilliseconds(): ' + date.getMilliseconds());

// возвращает кол-во миллисекунд прошедших со старта эпохи Unix
console.log('getTime(): ' + date.getTime());
Copy

Давайте поэкспериментируем:

const date = new Date();

// проверим количество мс с с начала эпохи Unix
console.log(`Время в мс с начала эпохи Unix: ${date.getTime()}`);
// "Время в мс с начала эпохи Unix: ....  значения будут меняться :-)
// "Время в мс с начала эпохи Unix: 1504721892483"

let result = 'Date: ';
result += date.getFullYear() + '/'; // год
result += date.getMonth() + '/'; // месяц, начиная с 0
result += date.getDate() + '. Day of week: '; // день недели, начиная с 1
result += date.getDay() + '.'; // день , начиная с 0

result += ' Time: ' + date.getHours() + ':'; // часы
result += date.getMinutes() + ':'; // минуты
result += date.getSeconds() + ':'; // секунды
result += date.getMilliseconds() + ''; // милисекунды

// строка должна показать текущее время и дату
console.log(result); // "Date: 2017/8/6. Day of week: 3. Time: 21:18:12:483"
// ...  значения будут меняться :-)
Copy

4.2. Сеттеры

Все, что можно прочитать можно записать, методы для записи начинаются с set*.

// Для установки даты существует 2 способа. Установим 1500000000000мс
// с начала эры Unix с помощью конструктора
const date = new Date(2017, 6, 14, 5, 40, 0, 0);

// Проверим
console.log(`2017, 6, 14, 5, 40 соответствует ${date.getTime()}`);
// "2017, 6, 14, 5, 40 соответствует 1500000000000"

/* С помощью методов set */
// Создадим новый объект с текущей датой
const secondDate = new Date();

// Изменим год и в нем же месяц и день месяца
secondDate.setFullYear(2017, 6, 14);
// Изменим час и в нем же минуты, секунды и милисекунды
secondDate.setHours(5, 40, 0, 0);

// Проверим
console.log(`2017, 6, 14, 5, 40 соответствует ${secondDate.getTime()}`);
// "2017, 6, 14, 5, 40 соотвествует 1500000000000"
Copy

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

Во всех браузерах, кроме IE10-, поддерживается новый стандарт, который добавляет специальные методы для форматирования дат.

Это делается вызовом date.toLocaleString(locale, opts), в котором можно задать много настроек. Он позволяет указать, какие параметры даты нужно вывести и ряд настроек вывода, после чего интерпретатор сам сформирует строку.

let date = new Date();

// формат вывода
const options = {
  weekday: 'long',
  year: 'numeric',
  month: 'short',
  day: 'numeric',
  hour: '2-digit',
  minute: '2-digit',
};

// Украина
const localeUk = date.toLocaleString('Uk-uk', options);
console.log(localeUk); // понеділок, 19 бер. 2018 р., 17:42

// USA
const localeUs = date.toLocaleString('en-US', options);
console.log(localeUs); // Monday, Mar 19, 2018, 5:43 PM
Copy

5.1. Методы вывода без локализации

toString(), toDateString(), toTimeString() возвращают стандартное строчное представление, не заданное жёстко в стандарте, а зависящее от браузера. Единственное требование к нему — читаемость человеком. Метод toString() возвращает дату целиком, toDateString() и toTimeString() — только дату и время соответственно.

6. Дополнительные материалы

• Дата и время в JavaScript

• The definitive guide to JavaScript dates

• Moment.js — библиотека работы с временем

• A moment.js tutorial

• dayjs - библиотека работы с временем

• date-fns — библиотека работы с временем