Работа с датой и временем в JavaScript

Содержание:
  1. Создание даты – 4 примера
  2. Получение отдельных компонентов даты и времени
  3. Установка отдельных компонентов даты и времени
  4. Преобразование даты в строку и её форматирование
  5. Метод для преобразования строки в дату
  6. Комментарии

На этом уроке мы познакомимся с объектом Date языка JavaScript и научимся его использовать на практике.

Создание даты – 4 примера

В JavaScript создание даты осуществляется с помощью объекта Date. Объект Date представляет собой точку на оси времени и предназначен для хранения даты и времени с точностью до миллисекунды.

Примеры создания даты в JavaScript.

1. Создание текущей даты и времени.

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

JavaScript
// текущая дата (дата и время, которая была в момент создания экземпляра объекта Date на локальном компьютере пользователя)
var now = new Date();
// например, выведем текущую дату в консоль
console.log(now);

Если нужно получить только сегодняшнюю дату в формате строки, то можно воспользоваться методом toLocaleDateString:

var now = new Date().toLocaleDateString(); // 19.12.2019

Текущее время пользователя можно получить так:

var now = new Date().toLocaleTimeString(); // 11:02:48
var now = new Date().toLocaleTimeString().slice(0,-3); // 11:02  

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

var now = new Date().toLocaleString(); // 19.12.2019, 11:02:48

2. Создание даты путём указания объекту Date количества миллисекунд, прошедших с 1 января 1970 00:00:00 UTC.

// 1 год (не высокосный) = 365*24*60*60*1000 = 31536000000 мс  
// например, создадим дату 01.01.1971, 00:00:00 по UTC:
var date1 = new Date(31536000000);

3. Создание даты посредством указания её объекту Date в виде строки.

При этом варианте создания даты JavaScript попытается понять переданную ей строку и сформировать на основе её дату. Преобразование строки в дату в JavaScript осуществляется с помощью метода Date.parse.

Например:

// создание даты на основе строки в формате DD.MM.YY
var date1 = new Date('05.11.19');
// создадим дату на основе строки в формате YYYY-MM-DDThh:mm:ss.sss (символ T используется для разделения даты и времени)
var date2 = new Date('2015-02-24T21:23');
// создадим дату на основе строки с указанием часового пояса (формат YYYY-MM-DDThh:mm:ss.sss±hh:mm):
var date3 = new Date('2015-02-24T22:02+03:00');  

4. Создание даты посредством указания следующих параметров через запятую: год (4 цифры), месяц (отсчёт ведётся с 0), день (1..31), часы (0..23), минуты (0..59), секунды (0..59), миллисекунды (0..999). Причём обязательными из них являются только первые два параметра.

Пример создания даты с указанием только обязательных параметров:

// создадим дату 01.01.2015 (неуказанные параметры по умолчанию равны: число - 01, часы - 00, минуты - 00, секунды - 00, миллисекунды – 000).
var date1 = new Date(2015,01);
// создадим дату 24.01.2015, 21:23
var date2 = new Date(2015,01,24,21,23);  

Примечание: Если Вам необходимо установить дату и время в UTC, то можно воспользоваться методом Date.UTC.

//1 пример
var date1 = Date.UTC(2015,1,1);
var date2 = new Date(date1);
alert(date2.toUTCString());
//2 пример
var newDate = new Date(Date.UTC(2015,1,1));
alert(newDate.toUTCString());  

Получение отдельных компонентов даты и времени

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

  • getFullYear() – возвращает год, состоящий из 4 чисел;
  • getMonth() – возвращает месяц в формате числа от 0 до 11 (0 – январь, 1 – февраль, 2 – март, ..., 11 – декабрь);
  • getDate() – возвращает число месяца от 1 до 31;
  • getHours() – возвращает количество часов от 0 до 23;
  • getMinutes() – возвращает количество минут от 0 до 59;
  • getSeconds() – возвращает количество секунд от 0 до 59;
  • getMilliseconds() – возвращает количество миллисекунд от 0 до 999.

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

Пример:

// создадим дату 11.11.2019 00:00 по UTC
var newDate = new Date(Date.UTC(2019,11,11));

// получим компоненты даты, если на устройстве пользователя местное время равно UTC+10:00
newDate.getFullYear(); //2019
newDate.getMonth(); // 10
newDate.getDate(); // 11
newDate.getHours(); // 10
newDate.getMinutes(); // 0
newDate.getSeconds(); // 0
newDate.getMilliseconds(); // 0

Пример, в котором поприветствуем пользователя в зависимости от того какой сейчас у него интервал времени:

// получим текущее время пользователя и компоненты этого времени
var 
  now = new Date(),
  hour = now.getHours(),
  minute = now.getMinutes(),
  second = now.getSeconds(),
  message = '';

// определим фразу приветствия в зависимости от местного времени пользователя 
if (hour <= 6) {
  message = 'Доброе время суток';
} else if (hour <= 12) {
  message = 'Доброе утро';
} else if (hour <= 18) {
  message = 'Добрый день';
} else {
  message = 'Добрый вечер';
}

// выполним форматирование времени с использованием тернарного оператора
minute = (minute < 10) ? '0' + minute : minute;
second = (second < 10) ? '0' + second : second;
hour = (hour < 10) ? '0' + hour : hour;

message += ', сейчас ' + hour + ':' + minute + ':' + second;

// выведем приветствие и время в консоль
console.log(message); // Добрый вечер, сейчас 22:50:39

В этом примере вывод времени в нужном формате осуществлён с использованием тернарного оператора.

В JavaScript имеются аналоги этих методов для получения отдельных компонентов даты и времени для часового пояса UTC+0. Эти методы называются аналогично, но с добавленным «UTC» после «get»: getUTCFullYear(), getUTCMonth(), getUTCDate(), getUTCHours(), getUTCMinutes(), getUTCSeconds(), getMilliseconds().

Получить номер дня недели в JavaScript можно с помощью метода getDay().

Данный метод возвращает число от 0 до 6 (0 – воскресенье, 1 – понедельник, ..., 6 – суббота).

Пример, в котором переведём день недели из числового в строковое представление:

var days =["Воскресенье", "Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота"];

// получим текущую дату
var now = new Date();
// выведем в консоль день недели
console.log('Сегодня ' + days[now.getDay()]);

Получить количество миллисекунд прошедших с 01.01.1970 00:00:00 UTC в JavaScript можно с помощью метода getTime().

Узнать разницу (в минутах) между часовым поясом локального устройства и UTC в JavaScript можно с помощью метода getTimezoneOffset().

Установка отдельных компонентов даты и времени

В JavaScript установить отдельные компоненты даты и времени можно с помощью следующих методов объекта Date:

  • setFullYear(year [, month, date]) – установка года (дополнительно можно задать ещё месяц и число);
  • setMonth(month [, date]) – установка месяца от 0 до 11 (0 – январь, 1 – февраль, 2 – март, ..., 11 – декабрь); дополнительно этот метод позволяет ещё установить число;
  • setDate(date) – установка числа;
  • setHours(hour [, min, sec, ms]) – устанавливает час от 0 до 23 (дополнительно можно ещё установить минуты, секунды и миллисекунды);
  • setMinutes(min [, [sec, ms]) – устаналивает минуты от 0 до 59 (дополнительно можно установить ещё секунды и миллисекунды);
  • setSeconds(sec, [ms]) – устанавливает секунды от 0 до 59 (дополнительно можно установить ещё миллисекунды);
  • setMilliseconds(ms) – устанавливает миллисекунды (от 0 до 999).

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

// создадим экземпляр объекта Date, содержащий текущую дату
var newDate = new Date();

// установим год
newDate.setFullYear(2019);
// установим год и месяц
newDate.setFullYear(2019, 08);
// установим 20.09.2019
newDate.setFullYear(2019, 08, 20);
// установим месяц
newDate.setMonth(05);
// установим месяц и число
newDate.setMonth(05, 15);
// установим число
newDate.setDate(28);
// установим час
newDate.setHours(13);
//установим час и минуты
newDate.setHours(13,20);

В JavaScript установка даты и времени в часовом поясе UTC+0 осуществляется с помощью следующих методов: setUTCFullYear(), setUTCMonth(), setUTCDate(), setUTCHours(), setUTCMinutes(), setUTCSecondes(), setUTCMilliseconds().

Установка даты и времени с помощью количества миллисекунд, прошедших с 01.01.1970 00:00:00 UTC осуществляется с помощью и тогда setTime().

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

Например:

// число 44 распределится следующим образом: 44 - 31 = 13, 13 февраля 2019
newDate.setFullYear(2019, 01, 44);

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

Примеры:

// дата, которая будет больше newDate на 7 дней
newDate.setDate(date1.getDate() + 7);

// дата, которая будет меньше newDate на 120 секунд
newDate.setSeconds(date1.getSeconds()-120);

// так можно установить последнее число предыдущего месяца для newDate
newDate.setDate(0);

Преобразование даты в строку и её форматирование

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

К первой группе можно отнести методы, которые выполняют это так, как это определено в браузере: toString(), toDateString(), toTimeString(), toUTCString().

Метод toString() возвращает полное представление даты, toDateString() – только дату, toTimeString() – только время, toUTCString() – полное представление даты, но в часовом поясе UTC+0.

Т.к. строковые представления, которые должны возвращать эти методы чётко не определены в стандарте, то они могут отличаться в разных браузерах.

Ко второй группе можно отнести методы с учётом часового пояса и языка локального компьютера: toLocaleString() – дату и время, toLocaleDateString() – только дату, toLocaleTimeString() – только время.

Методы toLocaleString(), toLocaleDateString(), toLocaleTimeString() имеют 2 необязательных параметра. Первый параметр предназначен для явного указания локали, второй - для задания опций форматирования.

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

Кроме этого, в JavaScript имеется ещё метод toISOString(). Он возвращает строку, содержащую дату и время в формате ISO (YYYY-MM-DDTHH:mm:ss.sssZ).

Пример:

// создадим дату 15.04.2019 18:43:59 (в часовом поясе пользователя)
var newDate = new Date(2019, 03, 15, 18, 43, 59);

console.log(newDate.toString()); // Mon Apr 15 2019 18:43:59 GMT+1000 (Владивосток, стандартное время)
console.log(newDate.toDateString()); // Mon Apr 15 2019
console.log(newDate.toTimeString()); // 18:43:59 GMT+1000 (Владивосток, стандартное время)
console.log(newDate.toLocaleString()); // 15.04.2019, 18:43:59
console.log(newDate.toLocaleDateString()); // 15.04.2019
console.log(newDate.toLocaleTimeString()); // 18:43:59
console.log(newDate.toUTCString()); // Mon, 15 Apr 2019 08:43:59 GMT
console.log(newDate.toISOString()); // 2019-04-15T08:43:59.000Z

Метод для преобразования строки в дату

JavaScript для преобразования строки в дату использует метод Date.parse(). Этот метод может преобразовать строку, если она выполнена в соответствии со стандартом RFC2822 или ISO 8601.

В этом уроке рассмотрим стандарт ISO 8601, в котором строка должна иметь следующий формат: YYYY-MM-DDThh:mm:ss.sssZ.

Где:

  • YYYY – год, состоящий из 4 цифр;
  • MM – месяц, состоящий из 2 цифр (01 = Январь, 02 = Февраль, и т.д.);
  • DD – день месяца, состоящий из 2 цифр (01..31);
  • T – символ для разделения даты и времени;
  • hh – количество часов (00..23);
  • mm - количество минут (00..59);
  • ss - количество секунд (00..59);
  • sss - количество миллисекунд (0..999);
  • Z - символ, который означает, что время задаётся в формате UTC. Если Вам необходимо вместо UTC установить часовой пояс, то букву "Z" следует заменить значением +hh:mm или -hh.mm.

Если строка, содержащая дату и время, задана не в формате RFC2822 или ISO 8601, то метод JavaScript Date.parse() всё равно может выполнить её преобразование, но результат в этом случае могут оказаться непредсказуемым.

//дата в формате ISO	
var date1 = new Date("2015-04-02");
alert(date1);
//дата и время в формате ISO	
var date2 = new Date("2015-02-02T11:40");
alert(date2);
//дата и время в часовом поясе +03:00 в формате ISO	
var date3 = new Date("2015-02-02T11:40+03:00");
alert(date3);

Комментарии: 14

Светлана Урусова
Светлана Урусова
Подскажите, нужно получить грамотно номер недели в году, а также период чисел с понедельника по воскресенье этой недели(или хотя бы понедельника)
Yarik
Yarik
Александр, здравствуйте, у меня проблема с календарем:
Мне нужно изменить календарные дату и время через расширение Google. То есть чтобы я мог ввести x часов, y минут и они бы добавились к заданному времени в календаре.
Изменение значения в input, в котором отображаются данные календаря- не помогло, мне нужно изменять значение даты и времени в самом календаре, не подскажите, как это можно сделать?
Вот как я попытался вручную добавить 5 минут к дате и времени календаря, но календарь просто не считывает информацию.
let timeInput = document.querySelectorAll('input.ui-inputtext')[1];  //это значение инпута, в котором и была дата и время)
            console.log(timeInput.value)
            let timeInputString = timeInput.value;
            let totalTime = Date.parse(timeInputString);
            let totalTimeAnd5 = totalTime + 300000;
            let newTimeInputString = new Date(totalTimeAnd5);
            let newTimeInput = newTimeInputString.toLocaleString('en-US')
            let correctNewTimeInput = newTimeInput.replace(',', '');
            timeInput.value = correctNewTimeInput; 
А вот тот самый input и календарь


itchief.ru/assets/uploadify/d/f/c/dfc77ad6e7b834669267c6d8870faf13.png
Александр Мальцев
Александр Мальцев
Здравствуйте! Сделайте живой пример на codepen.io или каком-нибудь другом сервере и дайте ссылку. Так не знаю что подсказать.
sergei2210
sergei2210
А как сделать что бы время было всегда он лайн, то есть отображалась без перезагрузки страницы.
Александр Мальцев
Александр Мальцев
Можно использовать метод setInterval, который будет запускать указанную функцию, например, через каждые 1000 мс:
<div id="timer"></div>
<script>
  const elTimer = document.querySelector('#timer');
  setInterval(() => {
    elTimer.textContent = new Date().toLocaleString();
  }, 1000);
</script>
Shust
Shust
Здравствуйте, подскажите пожалуйста, хочу из объекта Date получать время из другого часового пояса и выводить на экран, может есть какой то метод для изменения часового пояса кроме utc gmt и локального? Грубо говоря хочу выводить на экран время в Лос Анджелесе.
Александр Мальцев
Александр Мальцев
Здравствуйте!
const now = new Date();
now.toLocaleString('en-US', { timeZone: 'America/Los_Angeles' });
Святослав Афанасьев
Святослав Афанасьев
Добрый день, а есть возможность получить строку локального формата даты или времени? Например для использования в datetimepicker
Александр Мальцев
Александр Мальцев
Привет!
Для этого можно использовать методы toLocaleDateString и toLocaleTimeString.
Например, для текущей даты:
const date = (new Date()).toLocaleDateString();
const time = (new Date()).toLocaleTimeString();
Святослав Афанасьев
Святослав Афанасьев
Я имел ввиду строку формата, например «H:M:S a»
Александр Мальцев
Александр Мальцев
Если делать без дополнительных библиотек, то в этом случае нужно будет сначала получить отдельные составляющие времени с помощью методов getHours, getMinutes и т.д. После этого используя эти составляющие написать логику для формирования нужного вывода.

Можно с помощью сторонних библиотек, например: moment.js.
<!-- Подключаем библиотеку moment.js -->
<script src="moment-with-locales.js"></script>
<script>
  const now = moment(new Date());
  // форматируем дату
  const result = now.format('H:M:S a');
</script>
<code>
Adil
Adil
Как установить таймер на одну минуту никак не могу можно по adil7men33@gmail.com. написать
Александр Мальцев
Александр Мальцев
Установить таймер на 1 минуту (60 секунд) можно так:
// действие, которое нужно выполнить после 60 секунд
function action() {
  console.log('Ура, сработало!');
}
// запуск таймера на 60 секунд
setTimeout(action, 60000);
monaco
monaco
Александр здравствуйте! Извините что здесь пишу. Как с Вами можно связаться? На вашу почту выслал письмо, думаю попало в спам)