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

Дата и время являются частью нашей повседневной жизни и поэтому занимают видное место в программировании. В JavaScript при создании веб-сайта может потребоваться добавить календарь, расписание поездов или интерфейс для планирования встреч. Эти приложения должны показывать соответствующие моменты времени в зависимости от текущего часового пояса пользователя или выполнять вычисления, связанные с прибытием и вылетом самолета или временем начала и окончания какого-либо события. Кроме того, вам может потребоваться использовать JavaScript для отправки ежедневных отчетов в определенное время или для фильтрации (например, для поиска открытых в определенное время ресторанов).

Объект Date

Date – это встроенный объект JavaScript, который хранит дату и время. Он предоставляет ряд встроенных методов для форматирования и управления этими данными.

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

Для примера попробуйте присвоить переменной текущую дату. Создайте файл  now.js.

// Set variable to current date and time
const now = new Date();
// View the output
now;
Wed Oct 18 2017 12:41:34 GMT+0000 (UTC)

В выводе получается строка с датой, которая содержит следующие данные:

День недели Месяц День Год Час Минуты Секунды Часовой пояс
Wed Oct 18 2017 12 41 34 GMT+0000 (UTC)

Дата и время разбиваются и отображаются удобным для восприятия образом.

Однако JavaScript воспринимает дату, исходя из временной метки Unix-времени, которая представляет собой значение, состоящее из количества миллисекунд, прошедших с полуночи 1 января 1970 года. Получить метку времени можно с помощью метода getTime().

// Get the current timestamp
now.getTime();
1508330494000

Большое число, которое появляется в выводе в качестве текущей временной метки, представляет собой количество миллисекунд, прошедших с полуночи 1 января 1970 года на 18 октября 2017 года.

Нулевое время (или epoch time) представлено строкой даты 01 January, 1970 00:00:00 Universal Time (UTC) и временной меткой 0. Вы можете проверить это в браузере, создав в файле epoch.js новую переменную и присвоив ей новый экземпляр Date, основанный на отметке времени 0.

// Assign the timestamp 0 to a new variable
const epochTime = new Date(0);
epochTime;
01 January, 1970 00:00:00 Universal Time (UTC)

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

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

Метод создания Date Вывод
new Date() Текущая дата и время
new Date(timestamp) Дата на основе миллисекунд, прошедших с нулевого времени
new Date(date string) Дата на основе строки даты
new Date(year, month, day, hours, minutes, seconds, milliseconds) Дата на основе заданной даты и времени

Чтобы продемонстрировать различные способы ссылок на конкретную дату, попробуйте создать новые объекты Date, которые будут представлять 4 июля 1776 года, 12:30 по Гринвичу тремя различными способами.

// Timestamp method
new Date(-6106015800000);
// Date string method
new Date("January 31 1980 12:30");
// Date and time method
new Date(1776, 6, 4, 12, 30, 0, 0);

Все эти примеры представляют одну и ту же информацию о дате и времени тремя разными способами.

Как видите, метод временной метки имеет отрицательное число; любая дата до нулевого времени будет представлена как отрицательное число.

В третьем примере секунды и миллисекунды представлены 0. Если при создании объекта Date вам не хватает каких-либо данных, вы должны присвоить им 0. Отсутствующие данные нельзя пропускать, поскольку порядок данных о времени в строке не меняется. Также следует отметить, что месяц июль здесь обозначен как 6, а не как 7. Это происходит потому, что отсчет начинается не с 1, а с 0. Подробнее об этом – в следующем разделе.

Извлечение даты с помощью get

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

Дата/Время Метод Диапазон Пример
Год getFullYear() YYYY 1970
Месяц getMonth() 0-11 0 = January
День месяца getDate() 1-31 1 = 1st of the month
День недели getDay() 0-6 0 = Sunday
Час getHours() 0-23 0 = midnight
Минута getMinutes() 0-59
Секунда getSeconds() 0-59
Миллисекунда getMilliseconds() 0-999
Временная метка getTime() Количество миллисекунд с нулевого времени

Создайте новую дату, например 31 июля 1980 года, и присвойте ее переменной.

// Initialize a new birthday instance
const birthday = new Date(1980, 6, 31);

Теперь можно использовать все методы для извлечения каждого компонента даты.

birthday.getFullYear();      // 1980
birthday.getMonth();         // 6
birthday.getDate();          // 31
birthday.getDay();           // 4
birthday.getHours();         // 0
birthday.getMinutes();       // 0
birthday.getSeconds();       // 0
birthday.getMilliseconds();  // 0
birthday.getTime();          // 333849600000 (for GMT)

Иногда бывает необходимо извлечь только часть даты, и встроенные методы get помогут вам в этом.

Например, можно сравнить текущую дату с датой 3 октября, чтобы узнать, 3 октября сейчас или нет.

// Get today's date
const today = new Date();
// Compare today with October 3rd
if (today.getDate() === 3 && today.getMonth() === 9) {
console.log("It's October 3rd.");
} else {
console.log("It's not October 3rd.");
}
It's not October 3rd.

Поскольку на момент написания мануала было не 3 октября, консоль сообщит, что это не так.

Встроенные методы get позволяют получать доступ к компонентам даты.

Изменение даты с помощью set

Для всех перечисленных выше методов get существует соответствующий метод set. Если get используется для извлечения определенного компонента даты, set используется для изменения этих компонентов. Ниже приведена подробная таблица методов set для объекта Date.

Дата/Время Метод Диапазон Пример
Год setFullYear() YYYY 1970
Месяц setMonth() 0-11 0 = January
День месяца setDate() 1-31 1 = 1st of the month
День недели setDay() 0-6 0 = Sunday
Час setHours() 0-23 0 = midnight
Минута setMinutes() 0-59
Секунда setSeconds() 0-59
Миллисекунда setMilliseconds() 0-999
Временная метка setTime() Количество миллисекунд с нулевого времени

Эти методы set можно использовать для изменения одного или нескольких компонентов даты. Например, можно изменить год в переменной birthday на 1997.

// Change year of birthday date
birthday.setFullYear(1997);
birthday;
Thu Jul 31 1997 00:00:00 GMT+0000 (UTC)

Теперь при вызове переменной birthday вы видите не 1980, а 1997 год.

Встроенные методы set позволяют изменять разные части объекта Date.

Методы UTC

Методы get, описанные выше, извлекают компоненты даты на основе локальных настроек часового пояса пользователя. Чтобы увеличить контроль над датами и временем, вы можете использовать методы getUTC, которые работают так же, как методы get, но вычисляют время, основанное на стандарте UTC (всемирное координированное время). Ниже приведена таблица методов UTC для объекта Date в JavaScript.

Дата/Время Метод Диапазон Пример
Год getUTCFullYear() YYYY 1970
Месяц getUTCMonth() 0-11 0 = January
День месяца getUTCDate() 1-31 1 = 1st of the month
День недели getUTCDay() 0-6 0 = Sunday
Час getUTCHours() 0-23 0 = midnight
Минута getUTCMinutes() 0-59
Секунда getUTCSeconds() 0-59
Миллисекунда getUTCMilliseconds() 0-999

Чтобы проверить разницу между локальными методами get и методами get UTC, запустите следующий код.

// Assign current time to a variable
const now = new Date();
// Print local and UTC timezones
console.log(now.getHours());
console.log(now.getUTCHours());

Этот код выведет текущее время и время по часовому поясу UTC. Если вы сейчас находитесь в часовом поясе UTC, то числа, которые выведет программа, будут одинаковыми.

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

Заключение

В этом мануале вы узнали, как создать экземпляр объекта Date, как использовать его встроенные методы для доступа и изменения компонентов определенной даты. Более подробную информацию о времени и дате в JavaScript вы можете найти на Mozilla Developer Network.

Умение работать с датами важно для многих общих задач в JavaScript: от создания регулярных отчетов до отображения дат и расписаний в правильном часовом поясе.

Tags: