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

  1. Форматирования даты
  2. Трансформации в дату строки, содержащей информацию о ней
  3. Расчет времени между датами или временем


Давайте посмотрим, как мы можем создавать и использовать в коде JavaScript объект Date и его методы.

Объект Date в JavaScript

Создаем объект Date

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

Аналогичное действие, то есть создание переменной с инициализацией текущей даты, можно сделать так:

Ниже вы увидите формат вывода даты (console.log() был заменен на document.write()) с помощью обоих способов:

Как вы видите, в первом случае это действительно текущая дата, записанная с использованием английских слов, обозначающих краткое название дня недели, месяца, дня месяца и года, а также того времени, когда вы открыли данную страницу. Все эти данные объект Date получает с вашего компьютера, поэтому настройки часовых поясов, указанные, как GMT+0300 (Украина) будут различаться для разных регионов. Во втором случае - это длинное число, которое возвращает нам количество миллисекунд с 0 часов 1.01.1970 года.

Дело в том, что 1 января 1970 года является началом отсчета для форматирования дат в JavaScript. Именно с этого момента до любой другой даты мы можем получить количество миллисекунд. Выведем их количество с помощью методов valueOf() и getTime():

Оба метода вернут нам одинаковые цифры:

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

Как видно из примера ниже, цифры одинаковы:

Разница между датами

Время до Нового года

Пример: рассчитываем время, оставшееся до Нового года

Теперь посчитаем, сколько времени осталось до Нового года, используя переменные из скрипта выше и знания о том, что в сутках 24 часа, в часе 60 минут, в минуте - 60 секунд, а в секунде 1000 миллисекунд.

Результат будет таким:

До Нового года осталось ...

Дата в локальном формате

Для того чтобы вывести дату в том виде, к которому мы привыкли, мы использовали метод toLocaleString(). Для форматирования даты в привычном для пользователя виде есть такие встроенные методы объекта Date:

  • toLocaleString() для вывода и даты, и времени;
  • toLocaleDateString() для вывода только даты;
  • toLocaleTimeString() для вывода только времени.

Для того чтобы вывести дату, мы можем использовать пустые скобки, и она возьмет настройки из вашего браузера. Или можем указать языковую зону, а также ряд параметров (options), который будут влиять на вывод строкового значения даты.

Варианты свойств, задаваемых в options (посмотреть на MDN):

  • weekday - представление дней недели (может быть"narrow""short" и "long")
  • era - представление эр, например "от Рождества Христова". Значения: "narrow""short" и "long".
  • year - представление лет. Значения: "numeric" и "2-digit".
  • month - представление месяцев. Значения: "numeric""2-digit""narrow""short" и "long".
  • day - представление дней. Значения: "numeric" и "2-digit".
  • hour - представление часов. Значения: "numeric" и "2-digit"
  • minute - представление минут. Значения: "numeric" и "2-digit".
  • second - представление секунд. Значения: "numeric" и "2-digit".
  • timeZoneName - представление названий часовых поясов. Значения: "short" и "long".

Выведем дату, используя данные объекта options, описанные ниже:

Вывод сегодняшней даты будет таким:

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

Результат таков:

Дополнительная информация на learn.javascript.ru.

Пример использования локального времени для английских дат

See the Pen Clock - JS toLocaleTimeString Demo by Jordan (@DeyJordan) on CodePen.0

Дата в GMT-формате (относительно Гринвического меридиана)

  • toDateString() - для вывода только даты;
  • toTimeString() - для вывода только времени с указанием временного пояса (например, GMT+0200).

Давайте посмотрим на разницу между методами:

Проверяем:

Кроме локальных вариантов вывода даты вы можете использовать еще ряд методов, которые представляют строковое значение даты и времени в различных форматах:

Объект Date

Создание объекта Date с указанием нужной даты

Достаточно часто нам нужна именно сегодняшняя дата. Однако бывает необходимо получить дату из прошлого или из будущего, например, ваш день рождения (скажем, это 23 мая 1980 года) или 1 января следующего года, как в примере выше.  Давайте получим эти даты:

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

Давайте посмотрим на вывод дат:

Метод Date.parse()

Для того чтобы вывести количество миллисекунд с 01.01.1970 до указанной даты можно использовать метод Date.parse(). Если вы задали дату неверно, как во второй строке, то метод Date.parse() вернет NaN, т.к. здесь последовательность написания чисел в дате так же важна, как и при ее инициализации.

Выводим данные, полученные методом Date.parse():

Методы объекта Date, дающие информацию о дне, месяце, годе и дне недели указанной даты

В объекте Date описаны методы, которые позволяют получить (начинаются со слова get) или установить (начинаются со слова set) информацию о дне, месяце, годе и дне недели указанной даты (объект dateObj).

Метод Возвращаемое значение
dateObj.getDate() Возвращает день месяца в виде целого числа от 1 до 31
dateObj.setDate(dayValue) Устанавливает день месяца указанной даты по местному времени. Параметр dayValue - это целое число, представляющее номер дня в месяце.
dateObj.getDay() Возвращает день недели в виде целого числа от 0 до 6, причем 0 соответствует воскресенью, 1 — понедельнику, 2 — вторнику, а 6 - субботе.
dateObj.getMonth() Возвращает месяц указанной даты по местному времени. Нумерация месяцев начинается с нуля для первого месяца в году, т.е. 0 - это январь, а 11 - декабрь.
dateObj.setMonth(monthValue[, dayValue]) устанавливает месяц указанной даты по местному времени. Необязательный параметр dayValue позволяет указать день месяца в виде целого числа от 1 до 31.
dateObj.getFullYear() Возвращает год указанной даты по местному времени в виде четырехзначного числа (1980 или 2021, например).
dateObj.setFullYear(yearValue[, monthValue[, dayValue]]) Устанавливает полный год указанной даты по местному времени. Необязательный параметр monthValue в виде целого числа от 0 до 11, позволяет задать месяц от января до декабря. Необязательный параметр dayValue в виде целого числа от 1 до 31 позволяет задать день месяца. Если вы определите параметр dayValue, вы также должны определить параметр monthValue.

Различие между методами для получение данных о дате и для установления заключается в том, что методы типа setDate() в результате выполнения изменяют текущий объект (dateObj) и возвращают количество миллисекунд от начала эпохи (1 января 1970 00:00:00 UTC) для полученного значения объекта.В том случае, если значение параметра dayValue будет выходить за пределы количества дней для месяца, метод setDate() соответственно обновит объект Date. Например, если в качестве dayValue передать значение 0, дата будет установлена в последний день предыдущего месяца. Аналогичным образом метод setMonth(13) увеличит число года.

Давайте попробуем использовать метод getDay() для того, чтобы вывести, в каком месяце указанного года у нас 13-е число месяца придется на пятницу.

Попробуйте проверить сами:

Управление часами, минутами и секундами в объекте Date

Аналогично тому, как можно получить или установить дату в виде числа, месяца, года или дня недели, в JavaScript можно получить/установить данные для составляющих времени: часов, минут, секунд и миллисекунд. Для них доступен следующий набор методов:

Метод Возвращаемое значение
dateObj.getHours() Возвращает часы указанной даты по местному времени в формате от 0 до 23.
dateObj.setHours(hoursValue[, minutesValue[, secondsValue[, msValue]]]) Устанавливает часы указанной даты по местному времени и возвращает количество миллисекунд, прошедших с 1 января 1970 00:00:00 по UTC до времени, представляемого обновлённым экземпляром Date. Передаваемые параметры:
обязательный hoursValue - часы в виде целого числа от 0 до 23, необязательные: минуты minutesValue - целое число от 0 ло 59, секунды secondsValue - целое число от 0 ло 59, миллисекунды msValue - целое число от 0 ло 999.
dateObj.getMinutes() Возвращает минуты указанной даты по местному времени - целое число от 0 до 59.
dateObj.setMinutes(minutesValue[, secondsValue[, msValue]]) Устанавливает минуты указанной даты по местному времени. Параметры:
обязательный: минуты minutesValue в виде целого числа от 0 до 59,
необязательные: секунды secondsValue - целое число от 0 ло 59, миллисекунды msValue - целое число от 0 ло 999.
dateObj.getSeconds() Возвращает секунды указанной даты по местному времени - целое число от 0 до 59.
dateObj.setSeconds(secondsValue[, msValue]) Устанавливает секунды указанной даты по местному времени. Обязательный параметр - secondsValue - указывает секунды от 0 до 59. Необязательный параметр msValue позволяет указать миллисекунды в виде целого числа от 0 до 999.
dateObj.getMilliseconds() Возвращает возвращает миллисекунды указанной даты по местному времени в виде числа от 0 до 999.
dateObj.setMilliseconds(millisecondsValue) Устанавливает устанавливает миллисекунды указанной даты по местному времени в виде целого числа от 0 до 999.

Методы для установки времени отличаются от тех, которые их получают в плане изменения существующей даты. Если значение определяемого параметра будет выходить за пределы ожидаемого диапазона, то любой из методов, начинающихся со слова set, изменит дату, увеличив/уменьшив значение значение "старшего" параметра. Это значит, что метод setMinutes(100) увеличит часы на 1, оставив а в качестве минут значение 40. Если при этом значение часов уже было равно 23, то в дату запишется уже следующий день.

Если вам необходимо получить дату не по местному времени (с учетом смещения часовых поясов относительно Гринвического меридиана), необходимо использовать методы, содержащие строку UTC в своем названии:

  • dateObj.getUTCHours() - для получения часов указанной даты по всемирному координированному времени.
  • dateObj.getUTCMinutes() - для получения минут указанной даты по всемирному координированному времени.
  • dateObj.getUTCSeconds() - для получения секунд указанной даты по всемирному координированному времени.
  • dateObj.getUTCMilliseconds() - для получения миллисекунд указанной даты по всемирному координированному времени.

Это далеко не все методы, позволяющие получить дату в UTC формате. Вы можете познакомиться со всеми доступными методами на MDN.

Пример: изменяем дату на полночь следующего за текущим дня

Предположим, нам необходимо получить дату, которая на несколько часов больше чем сегодняшняя, а именно - полночь, т.е. начало следующего дня. Используем для этого несколько рассмотренных методов:

Выводим даты в привычном формате: сегодняшнюю и ту, что наступит в полночь.

Кроме того, мы можем добавлять часы, минуты, секунды, изменяя таким образом дату, с которой начали отсчет. Например, мы можем узнать, какая дата будет спустя 5 часов или 24 часа. И если вы точно понимаете, что через 24 часа будет завтрашняя дата, но с такими же параметрами в виде часов-минут-секунд, то через 5 часов это может быть еще сегодняшний день, а может быть уже завтрашний, если страницу с кодом вы открыли, скажем, в 10 вечера.

Результат:

Пример: таймер обратного отсчета до полуночи

Мы уже считали количество времени, оставшееся до Нового года. Теперь давайте посчитаем, сколько времени осталось до полуночи от настоящего времени. Заодно посмотрим, как можно получить дату полуночи другим способом (10-я строка).

Посмотрим на работающий пример:

Полночь

Почувствуйте себя Золушкой ))

Вы также можете посмотреть, как устанавливать время, используя синтаксис класса в JavaScript.

Преобразование дат

При создании даты может возникнуть необходимость поменять местами день и месяц (например, при передаче параметров в функцию), т.к. дата в привычном нам формате имеет синтаксис "день.месяц.год". Однако при создании даты с помощью класса Date необходимо передавать строку в формате "месяц/день/год". Для того чтобы изменить порядок расположения дня и месяца в дате, нужно использовать метод replace() для строк:

В результате работы скрипта мы получим массив дат.

Пример: получение даты из поля типа date

Поле типа date

В ряде случаев бывает необходимость в форме разместить поле с  type="date", например, для выбора даты начала и/или конца какого-либо периода (поездка, отправка груза и т.п.). Дата из такого поля возвращается в формате "гггг-мм-дд", хотя визуально выбор выглядит, как "дд.мм.гггг". Однако далеко не всегда такой формат подойдет для ваших целей. Кстати, если необходимо установить в поле ввода даты какое-то определенное число, то формат также должен быть "гггг-мм-дд", иначе вы получите  предупреждение в консоли (в примере ниже нужно раскомментировать строки 19-21).

Предупреждения о формате даты

Давайте посмотрим, как мы можем использовать поле для ввода даты в скрипте:

Особенность получения даты на основе new Date() является то, что в полях месяц и день должен быть с ведущим нулем, если число меньше 10. Для решения этой проблемы воспользуемся функцией format() из скрипта таймера обратного отсчета до полуночи.

Кроме того, в поле месяц число должно быть на единицу больше, чем возвращает метод getMonth(), т.к. в нем счет месяцев начинается с 0, а не с 1, как в привычном нам формате дат.

Проверим пример на практике:

 

 

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *