Содержание
Это вольный перевод замечательной статьи Date and time in JavaScript, автором которой является Dominik Wlazlowski.
Пока тикают часы и бегут дни на календаре, давайте поговорим о дате и времени в JavaScript. Здесь вы не найдёте много теории, скорее, тут будет больше практических примеров.
Объект Date
Для обработки дат в JavaScript существует объект Date.
Объект Date — методы
Методы объекта Date:
Совет: используйте instanceof
С помощью оператора instanceof мы можем проверить, имеем ли мы дело с объектом определённого типа. Например, давайте проверим, работаем ли мы с экземпляром объекта Date:
Установка даты
При создании объекта Date, мы можем указать (установить) дату несколькими способами:
Как вы уже заметили, мы можем установить только дату, или дату и час. Но мы также можем установить дату с помощью специализированных методов:
Этот код установит: год, месяц и день.
Например, для контраста, тут мы устанавливаем будущую дату (10 дней вперед):
Другие примеры
Пример — Измерение времени выполнения:
Пример — Сравнение дат с помощью объекта Date:
Довольно простой и эффективный способ.
Пример — Текущее время:
Пример — Создание читаемой даты:
В случае с методом getMonth() , мы добавили к результату 1. Это нужно потому, что этот метод возвращает месяц числом, начиная с 0. Такая вот особенность JavaScript.
Есть ещё одна проблема — форматирование. Инструкция alert(resTxt); выдаст результат, который будет подобен следующему:
Было бы здорово добавить недостающий ‘0’ перед секундами и месяцем, чтобы получить результат в удобном для нас виде:
Просто добавим условие в код, который генерирует финальную строку:
Этот код мы увидим в следующем, чуть более сложном примере.
Пример — Собственная функция форматирования даты:
После выполнения код будет отображать результат похожий на этот:
Это полный пример кода, который отображает дату и время в JavaScript. Он также демонстрирует, как действуют методы объекта Date.
Время и таймеры
Функция — setTimeout()
Здесь мы кратко поговорим о функции обратного отсчёта, а также как выполнить код по прошествии некоторого времени (функция setTimeout ):
К слову, иногда это очень полезно. Например, когда мы хотим вызвать какой-нибудь код из библиотеки, которая на данный момент ещё не полностью загружена. Или вызвать функцию, для работы которой, необходимо дождаться результатов работы другой части кода.
Для проверки того, что все работает должным образом, нужно вызвать наш код с задержкой.
Функция — setInterval()
Кроме того, программа может выполнять код несколько раз с помощью функции setInterval :
Функция в setInterval выполняется 5 раз с задержкой в 2 секунды (2000 миллисекунд), после прерывается.
Дополнительные примеры
Пример — Разница времени или сколько прошло времени между датами:
Пример — Вычисление возраста в JavaScript:
Для начала организуем простой пользовательский интерфейс в виде HTML-формы:
В этом примере мы получаем и обрабатываем дату рождения пользователя. В результате рассчитывается возраст пользователя, исходя из полученных от него данных.
Дата и время в JavaScript библиотеках
Используя различные библиотеки, мы ожидаем, что они предоставят нам упрощённый вариант написания кода. Это также относится к дате и времени.
Например, jQuery предлагает нам метод now() :
Метод $.now() — это сокращение от выражения (new Date).getTime() .
Библиотека MooTools предоставляет нам большие возможности операций над датой и временем в JavaScript, при этом используя минимум кода (например, методы: date.get(), date.set(), date.clone() или date.increment()).
При реализации календаря, мы можем написать его вручную, на так называемом "чистом JavaScript", при этом потратим кучу времени. С другой стороны, используя полезные для нас библиотеки, мы сократим время разработки.
Лучше эффективно использовать наше драгоценное время, нежели изобретать велосипед заново. При этом, мы будем использовать только проверенные, готовые и очень надёжные решения.
Особенно могу порекомендовать такие библиотеки:
Заключение
В этой статье мы узнали не только о работе с датой и временем на языке JavaScript, но и о множестве готовых решений, основанных на реальных примерах, а также поговорили о типичных элементах объектно-ориентированного программирования (ООП).
Для особо любопытных я бы рекомендовал более подробное описание объекта Date на MDN.
И теперь пришло время. чтобы закончить эту статью.
Спасибо за ваше время и внимание.
Делимся на оплату хостинга или кофе.
Чем чаще пью кофе, тем чаще пишу статьи.
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/date.
Для работы с датой и временем в JavaScript используются объекты Date.
Создание
Для создания нового объекта типа Date используется один из синтаксисов:
Создаёт объект Date с текущей датой и временем:
Создаёт объект Date , значение которого равно количеству миллисекунд (1/1000 секунды), прошедших с 1 января 1970 года GMT+0.
Если единственный аргумент – строка, используется вызов Date.parse (см. далее) для чтения даты из неё.
new Date(year, month, date, hours, minutes, seconds, ms)
Дату можно создать, используя компоненты в местной временной зоне. Для этого формата обязательны только первые два аргумента. Отсутствующие параметры, начиная с hours считаются равными нулю, а date – единице.
Год year должен быть из 4 цифр.
Отсчёт месяцев month начинается с нуля 0.
Дата задана с точностью до миллисекунд:
Получение компонентов даты
Для доступа к компонентам даты-времени объекта Date используются следующие методы:
getFullYear() Получить год (из 4 цифр) getMonth() Получить месяц, от 0 до 11. getDate() Получить число месяца, от 1 до 31. getHours(), getMinutes(), getSeconds(), getMilliseconds() Получить соответствующие компоненты.
Некоторые браузеры реализуют нестандартный метод getYear() . Где-то он возвращает только две цифры из года, где-то четыре. Так или иначе, этот метод отсутствует в стандарте JavaScript. Не используйте его. Для получения года есть getFullYear() .
Дополнительно можно получить день недели:
getDay() Получить номер дня в неделе. Неделя в JavaScript начинается с воскресенья, так что результат будет числом от 0(воскресенье) до 6(суббота).
Все методы, указанные выше, возвращают результат для местной временной зоны.
Существуют также UTC-варианты этих методов, возвращающие день, месяц, год и т.п. для зоны GMT+0 (UTC): getUTCFullYear() , getUTCMonth() , getUTCDay() . То есть, сразу после "get" вставляется "UTC" .
Если ваше локальное время сдвинуто относительно UTC, то следующий код покажет разные часы:
Кроме описанных выше, существуют два специальных метода без UTC-варианта:
Возвращает число миллисекунд, прошедших с 1 января 1970 года GMT+0, то есть того же вида, который используется в конструкторе new Date(milliseconds) .
Возвращает разницу между местным и UTC-временем, в минутах.
Установка компонентов даты
Следующие методы позволяют устанавливать компоненты даты и времени:
- setFullYear(year [, month, date])
- setMonth(month [, date])
- setDate(date)
- setHours(hour [, min, sec, ms])
- setMinutes(min [, sec, ms])
- setSeconds(sec [, ms])
- setMilliseconds(ms)
- setTime(milliseconds) (устанавливает всю дату по миллисекундам с 01.01.1970 UTC)
Все они, кроме setTime() , обладают также UTC-вариантом, например: setUTCHours() .
Как видно, некоторые методы могут устанавливать несколько компонентов даты одновременно, в частности, setHours . При этом если какая-то компонента не указана, она не меняется. Например:
Автоисправление даты
Автоисправление – очень удобное свойство объектов Date . Оно заключается в том, что можно устанавливать заведомо некорректные компоненты (например 32 января), а объект сам себя поправит.
Неправильные компоненты даты автоматически распределяются по остальным.
Например, нужно увеличить на 2 дня дату «28 февраля 2011». Может быть так, что это будет 2 марта, а может быть и 1 марта, если год високосный. Но нам обо всем этом думать не нужно. Просто прибавляем два дня. Остальное сделает Date :
Также это используют для получения даты, отдалённой от имеющейся на нужный промежуток времени. Например, получим дату на 70 секунд большую текущей:
Можно установить и нулевые, и даже отрицательные компоненты. Например:
Преобразование к числу, разность дат
Когда объект Date используется в числовом контексте, он преобразуется в количество миллисекунд:
Важный побочный эффект: даты можно вычитать, результат вычитания объектов Date – их временная разница, в миллисекундах.
Это используют для измерения времени:
Бенчмаркинг
Допустим, у нас есть несколько вариантов решения задачи, каждый описан функцией.
Как узнать, какой быстрее?
Для примера возьмём две функции, которые бегают по массиву:
Чтобы померить, какая из них быстрее, нельзя запустить один раз walkIn , один раз walkLength и замерить разницу. Одноразовый запуск ненадёжен, любая мини-помеха исказит результат.
Для правильного бенчмаркинга функция запускается много раз, чтобы сам тест занял существенное время. Это сведёт влияние помех к минимуму. Сложную функцию можно запускать 100 раз, простую – 1000 раз…
Померяем, какая из функций быстрее:
Теперь представим себе, что во время первого бенчмаркинга bench(walkIn) компьютер что-то делал параллельно важное (вдруг) и это занимало ресурсы, а во время второго – перестал. Реальная ситуация? Конечно реальна, особенно на современных ОС, где много процессов одновременно.
Гораздо более надёжные результаты можно получить, если весь пакет тестов прогнать много раз.
В современных браузерах (кроме IE9-) вызов performance.now() возвращает количество миллисекунд, прошедшее с начала загрузки страницы. Причём именно с самого начала, до того, как загрузился HTML-файл, если точнее – с момента выгрузки предыдущей страницы из памяти.
Так что это время включает в себя всё, включая начальное обращение к серверу.
Его можно посмотреть в любом месте страницы, даже в , чтобы узнать, сколько времени потребовалось браузеру, чтобы до него добраться, включая загрузку HTML.
Возвращаемое значение измеряется в миллисекундах, но дополнительно имеет точность 3 знака после запятой (до миллионных долей секунды!), поэтому можно использовать его и для более точного бенчмаркинга в том числе.
Для измерения с одновременным выводом результатов в консоли есть методы:
- console.time(метка) – включить внутренний хронометр браузера с меткой.
- console.timeEnd(метка) – выключить внутренний хронометр браузера с меткой и вывести результат.
Параметр "метка" используется для идентификации таймера, чтобы можно было делать много замеров одновременно и даже вкладывать измерения друг в друга.
В коде ниже таймеры walkIn , walkLength – конкретные тесты, а таймер «All Benchmarks» – время «на всё про всё»:
При запуске этого примера нужно открыть консоль, иначе вы ничего не увидите.
Современные интерпретаторы JavaScript делают массу оптимизаций, например:
- Автоматически выносят инвариант, то есть постоянное в цикле значение типа arr.length , за пределы цикла.
- Стараются понять, значения какого типа хранит данная переменная или массив, какую структуру имеет объект и, исходя из этого, оптимизировать внутренние алгоритмы.
- Выполняют простейшие операции, например сложение явно заданных чисел и строк, на этапе компиляции.
- Могут обнаружить, что некий код, например присваивание к неиспользуемой локальной переменной, ни на что не влияет и вообще исключить его из выполнения, хотя делают это редко.
Эти оптимизации могут влиять на результаты тестов, поэтому измерять скорость базовых операций JavaScript («проводить микробенчмаркинг») до того, как вы изучите внутренности JavaScript-интерпретаторов и поймёте, что они реально делают на таком коде, не рекомендуется.
Форматирование и вывод дат
Во всех браузерах, кроме IE10-, поддерживается новый стандарт Ecma 402, который добавляет специальные методы для форматирования дат.
Это делается вызовом date.toLocaleString(локаль, опции) , в котором можно задать много настроек. Он позволяет указать, какие параметры даты нужно вывести, и ряд настроек вывода, после чего интерпретатор сам сформирует строку.
Пример с почти всеми параметрами даты и русским, затем английским (США) форматированием:
Вы сможете подробно узнать о них в статье Intl: интернационализация в JavaScript, которая посвящена этому стандарту.
Методы вывода без локализации:
toString() , toDateString() , toTimeString() Возвращают стандартное строчное представление, не заданное жёстко в стандарте, а зависящее от браузера. Единственное требование к нему – читаемость человеком. Метод toString возвращает дату целиком, toDateString() и toTimeString() – только дату и время соответственно.
toUTCString() То же самое, что toString() , но дата в зоне UTC.
toISOString() Возвращает дату в формате ISO Детали формата будут далее. Поддерживается современными браузерами, не поддерживается IE8-.
Если хочется иметь большую гибкость и кросс-браузерность, то также можно воспользоваться специальной библиотекой, например Moment.JS или написать свою функцию форматирования.
Разбор строки, Date.parse
Все современные браузеры, включая IE9+, понимают даты в упрощённом формате ISO 8601 Extended.
Этот формат выглядит так: YYYY-MM-DDTHH:mm:ss.sssZ , где:
- YYYY-MM-DD – дата в формате год-месяц-день.
- Обычный символ T используется как разделитель.
- HH:mm:ss.sss – время: часы-минуты-секунды-миллисекунды.
- Часть ‘Z’ обозначает временную зону – в формате +-hh:mm , либо символ Z , обозначающий UTC. По стандарту её можно не указывать, тогда UTC, но в Safari с этим ошибка, так что лучше указывать всегда.
Также возможны укороченные варианты, например YYYY-MM-DD или YYYY-MM или даже только YYYY .
Кроме возможности создавать свои объекты JavaScript также предоставляет набор встроенных типов объектов, которые мы можем применять в различных ситуациях.
Объект Date. Работа с датами
Объект Date позволяет работать с датами и временем в JavaScript.
Существуют различные способы создания объекта Date. Первый способ заключается в использовании пустого конструктора без параметров:
В этом случае объект будет указывать на текущую дату компьютера:
Второй способ заключается в передаче в конструктор Date количества миллисекунд, которые прошли с начала эпохи Unix, то есть с 1 января 1970 года 00:00:00 GMT:
Третий способ состоит в передаче в конструктор Date дня, месяца и года:
Если мы используем полное название месяца, то оно пишется в по-английски, если используем сокращенный вариант, тогда используется формат месяц/день/год.
Четвертый способ состоит в передаче в конструктор Date всех параметров даты и времени:
В данном случае используются по порядку следующие параметры: new Date(год, месяц, число, час, минуты, секунды, миллисекунды) . При этом надо учитывать, что отсчет месяцев начинается с нуля, то есть январь — 0, а декабрь — 11.
Получение даты и времени
Для получения различных компонентов даты применяется ряд методов:
getDate() : возвращает день месяца
getDay() : возвращает день недели (отсчет начинается с 0 — воскресенье, и последний день — 6 — суббота)
getMonth() : возвращает номер месяца (отсчет начинается с нуля, то есть месяц с номер 0 — январь)
getFullYear() : возвращает год
toDateString() : возвращает полную дату в виде строки
getHours() : возвращает час (от 0 до 23)
getMinutes() : возвращает минуты (от 0 до 59)
getSeconds() : возвращает секунды (от 0 до 59)
getMilliseconds() : возвращает миллисекунды (от 0 до 999)
toTimeString() : возвращает полное время в виде строки
Получим текущую дату:
Перевести из числовых значений в более привычные названия для дней недели и месяцев используются массивы. Получив индекс дня недели ( myDate.getDay() ) и индекс месяца ( myDate.getMonth() ) можно получить нужный элемент из массива.
Теперь получим текущее время:
Установка даты и времени
Коме задания параметров даты в конструкторе для установки мы также можем использовать дополнительные методы объекта Date:
setDate() : установка дня в дате
setMonth() : уставовка месяца (отсчет начинается с нуля, то есть месяц с номер 0 — январь)
setFullYear() : устанавливает год
setHours() : установка часа
setMinutes() : установка минут
setSeconds() : установка секунд
setMilliseconds() : установка миллисекунд
При установке значений мы можем передать величину, большую, чем максимальное допустимое значение. Например, установить для часа число 54:
В этом случае значение часа будет равно 54 — 24 * 2 = 6, а оставшиеся часы будут составлять два дня (24 * 2), что прибавит к дате два дня. То же самое действует и в отношении дней, минут, секунд, миллисекунд и месяцев.