Работа с Датой в 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)
Copy2.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)
Copy3. 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"
// ... значения будут меняться :-)
Copy4.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"
Copy5. Форматирование и вывод дат
Во всех браузерах, кроме 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
Copy5.1. Методы вывода без локализации
toString(), toDateString(), toTimeString() возвращают стандартное строчное представление, не заданное жёстко в стандарте, а зависящее от браузера. Единственное требование к нему — читаемость человеком. Метод toString() возвращает дату целиком, toDateString() и toTimeString() — только дату и время соответственно.
6. Дополнительные материалы
Last updated