Редкому программисту случается избежать работы с датой и временем. Вообще, дата/время - базовое понятие и в основной массе языков существуют встроенные механизмы работы с этим типом данных. Казалось бы, JS не исключение, есть встроенный тип Date, есть куча функций в прототипе, однако…
Кто виноват Первая проблема возникает когда нужно задать дату/время в тайм-зоне отличной от UTC и от локальной. Конструктор Date не имеет такого параметра.New Date();
new Date(value);
new Date(dateString);
new Date(year, month[, day[, hour[, minute[, second[, millisecond]]]]]);
Единственный вариант, где можно указать смещение относительно UTC - третий способ. Вызов конструктора в этом формате позволяет передать смещение как часть строки:
New Date("Sun Feb 01 1998 00:00:00 GMT+0700")
Строка принимается в формате RFC2822, весьма неудобном и трудном к ручному вводу. Получить такую строку из пользовательского ввода практически невозможно. Я не могу себе представить человека, который бы согласился вводить дату в таком формате.
Не смотря на то, что в Date можно установить все параметры по отдельности для таймзоны UTC - проблемы это не решает – таймзона останется локальной. Но это не единственная проблема.
Смещение относительно UTC - не константа. Это функция от даты, времени (ну или от таймштампа, если угодно) и, опять же, тайм-зоны. Например, для Москвы последний перевод времени даёт:
New Date(2014, 9, 25, 0, 0, 0); // 26.10.2014, 21:00:00 GMT+3
new Date(2014, 9, 27, 0, 0, 0); // 25.10.2014, 22:00:00 GMT+4
Таким образом, конструктор в третьем варианте становится практически бесполезным поскольку смещение нужно знать заранее. А оно, как было сказано, так просто получено быть не может. Единственная библиотека, из попавшихся мне, которая использует базу данных Олсона для обсчета сдвигов - timezone-JS . Проблема использования этой библиотеки в том, что низлежащие библиотеки (date/time picker-ы) про неё ничего не знают и внутри активно используют стандартный Date. Остальные библиотеки, работающие с объектом Date, явно на эту базу не ссылаются и обновления из нее не получают. (Поправьте меня в комментариях.)
В бизнес применении тайм-зоны имеют смысл только если заданы дата и время. К примеру, если рабочий день начинается в 9:00, то вряд ли вы ожидаете что ваш коллега из Владивостока начнет работать в 15:00. Таймзоны учитываться не должны и в таком случае отображать дату нужно в UTC. Однако, в случае с регулярными событиями, происходящими в один момент времени в разных часовых поясах, таймзона все таки нужна. К примеру, ваш ежедневный скрам начинается в 10:00 для вас и в 13:00 для Новосибирска. Между прочим, в этом как раз и есть разница между GMT и UTC. UTC – это время без смещения, а GMT – это время со смещением 0. Поясню на примере:
31.12.2014, 20:59:59 GMT в Московском часовом поясе должно выглядеть как 31.12.2014, 23:59:59
31.12.2014, 20:59:59 UTC в Московском часовом поясе должно выглядеть как 31.12.2014, 20:59:59
Из-за этой арифметики их в основном и путают. К сожалению, напутано с этим параметром повсеместно. Отсутствие прямого указания таймзоны в JS трактуется как локальная таймзона, а указание UTC и GMT равнозначно.
В ситуации мог бы помочь Intl . Мог бы, но не обязан. В частности, там есть такой параметр timeZone, но, чуть далее стандартом определено: The time zone to use. The only value implementations must recognize is «UTC». В настоящее время кроме Chrome не один браузер произвольные таймзоны не поддерживает.
С диапазонами времени в JS все совсем плохо - ничего подобного в языке нет. Хочешь сделать хорошо – делай сам.
- Вариант 1.Не использовать произвольную таймзону. Вариант предпочтительный и, наверное, самый безболезненный. То есть, у вас есть только локальная таймзона и UTC. Для этих случаев во всех браузерах вроде как всё есть, пусть и не очень удобно. К тому же, таймзона выставляется глобально для ОС и менять ее для конкретного web-приложения некошерно.
- Вариант 2.Если произвольные таймзоны необходимы - не использовать таймштамп. Совсем. Храните время в сберегательной кассе в RFC строке с указанием таймзоны. Не уверен что это поможет победить сдвиги таймзоны в кроссбраузерном понимании, но, как минимум, Chrome о таких сдвигах в курсе.
- Вариант 3.Ситуации бывают разные и случается так, что в базу время записывается с какого ни будь устройства. То есть в виде таймштампа. Тут бежать некуда, что бы корректно отобразить время нужно знать либо таймзону устройства, либо таймзону пользователя, либо и того и другого и обсчитывать все сдвиги врукопашную. Без использования базы Олсона тут не обойтись.
Тут должна быть мораль сей басни, но добавить мне пока больше нечего. В черновиках стандарта ECMA я никаких подвижек не наблюдаю, наверное, их и не будет.
Объект Date позволяет работать с датами и временем. Для создания нового объекта Date используется следующий синтаксис:
New Date()
Даты хранятся в нём как количество миллисекунд, прошедших с полуночи 1 января 1970 г. согласно единому всемирному времени (UTC). Благодаря такому формату с помощью Date можно точно представлять даты, отстоящие от 1 января 1970 г. на 285616 лет.
Если конструктор Date вызывается без аргументов, создаётся объект с текущими значениями даты и времени. Для создания объекта Date с определенной датой или временем, необходимо будет передать один из четырех возможных параметров:
- миллисекунды: значение должно быть числом миллисекунд с 01.01.1970 var birthDate = new Date(8298400000); document.write(birthDate);
- строка с датой: любая дата в формате поддерживаемом методом parse() var birthDate = new Date("April 16, 1975"); document.write(birthDate);
- год, месяц, день
var birthDate = new Date(1975, 4, 28);
document.write(birthDate);
Обратите внимание, что число 4 соответствует маю месяцу. Это значит, что январю соответствует число 0. Аналогичным образом вычисляются и дни, только нулю в этом случае соответствует воскресенье.
- год, месяц, день, час, минуты, секунды, миллисекунды
При работе с объектом Date важно помнить, что вычисления выполняются с использованием единого всемирного времени (UTC), несмотря на то, что ваш компьютер может отображать время в соответствии с вашей временной зоной.
Методы| getDate() | Возвращает день месяца (от 1 до 31) для указанной даты по местному времени. |
| getDay() | Возвращает день недели (от 0 до 6; 0 = воскресенье, 1 = понедельник и т.д.) для указанной даты по местному времени.. |
| getFullYear() | Возвращает год (четыре цифры). |
| getHours() | Возвращает час (от 0 до 23). |
| getMilliseconds() | Возвращает миллисекунды (от 0 до 999). |
| getMinutes() | Возвращает минуты (от 0 до 59). |
| getMonth() | Возвращает месяц (от 0 до 11; 0 = январь, 1 = февраль и т.д.). |
| getSeconds() | Возвращает секунды (от 0 до 59). |
| getTime() | Возвращает количество миллисекунд, прошедших с полуночи 01.01.1970. |
| getTimezoneOffset() | Возвращает разницу во времени между временем UTC и местным временем, в минутах. |
| getUTCDate() | Возвращает день месяца по всемирному времени (от 1 до 31). |
| getUTCDay() | Возвращает день недели по всемирному времени (от 0 до 6). |
| getUTCFullYear() | Возвращает год по всемирному времени (четыре цифры). |
| getUTCHours() | Возвращает час по всемирному времени (от 0 до 23). |
| getUTCMilliseconds() | Возвращает миллисекунды по всемирному времени (от 0 до 999). |
| getUTCMinutes() | Возвращает минуты по всемирному времени (от 0 до 59). |
| getUTCMonth() | Возвращает месяц по всемирному времени (от 0 до 11). |
| getUTCSeconds() | Возвращает секунды по всемирному времени (от 0 до 59). |
| parse() | Анализирует строку даты (например, "21 мая 1992 года") и возвращает строку со значением даты, которая содержит число в миллисекундах с 1 января 1970 00:00:00. |
| setDate() | Устанавливает день месяца для указанной даты по местному времени (от 1 до 31). |
| setFullYear() | Устанавливает год (четыре цифры). |
| setHours() | Устанавливает часы для указанной даты по местному времени (от 0 до 23). |
| setMilliseconds() | Устанавливает миллисекунды для указанной даты по местному времени. |
| setMinutes() | Устанавливает минуты (от 0 до 59). |
| setMonth() | Устанавливает месяц (от 0 до 11). |
| setSeconds() | Устанавливает секунды (от 0 до 59). |
| setTime() | Устанавливает дату в миллисекундах после (или до) 01.01.1970. |
| setUTCDate() | Задает день месяца. |
| setUTCFullYear() | Устанавливает год по всемирному времени (четыре цифры). |
| setUTCHours() | Устанавливает час для указанной даты по всемирному времени. |
| setUTCMilliseconds() | Задает миллисекунды для указанной даты по всемирному времени. |
| setUTCMinutes() | Устанавливает минуты для указанной даты по всемирному времени. |
| setUTCMonth() | Задает месяц для указанной даты по всемирному времени. |
| setUTCSeconds() | Устанавливает секунды для указанной даты по всемирному времени. |
| toDateString() | |
| toISOString() | Преобразует дату в строку, используя стандарт ISO 8601. |
| toJSON() | Возвращает дату в виде строки, отформатированную как дата JSON. |
| toLocaleDateString() | |
| toLocaleTimeString() | Возвращает часть даты в виде строки, с представлением даты на основе параметров системы. |
| toLocaleString() | Возвращает дату в виде строки, с представлением даты на основе параметров системы. |
| toString() | Возвращает строку, представляющую указанный объект Date. |
| toTimeString() | Возвращает часть даты в виде строки. |
| toUTCString() | Преобразует дату в строку, используя часовой пояс UTC. |
| UTC() | Принимает те же параметры, что и длинная форма конструктора (т.е. 2-7) и возвращает количество миллисекунд с 1 января 1970, 00:00:00 UTC. |
| valueOf() | Возвращает примитивное значение объекта Date. |
Для работы с датой и временем в JavaScript существует специальный объект - Date. Этот объект поддерживается практически всем версиями JavaScript, а зачит им можно пользоваться не оглядываясь на проблемы совместимости.
Дата и время в объекте Date хранятся не в явном виде, а как и в большинстве языков программирования - в виде количества миллисекунд, прошедших с дня рождения Unix, т.е. с 0 часов 0 минут 1 января 1970 года. Отличительная особенность объекта Date - все диапазонные значения имеют индексы, начинающиеся с нуля. Это означает, что январь будет иметь индекс 0 (месяц №0), а декабрь будет не двенадцатым, а одиннадцатым месяцем. То же самое справедливо и для дней недели, часов, минут и пр.
Создать объект Date очень просто:
// текущая дата-время var date = new Date(); // дата-время из строки или числа var date = new Date(дата); // дата-время из отдельных значений var date = new Date(год, месяц, день, час, минута, секунда, миллисекунда);
Объект Date обладает рядом очень полезных методов, позволяющих работать с отдельными компонентами даты-времени, а так же проводить проверку коррестности и правильный вывод даты в заданном формате.
| Методы получения компонентов даты-времени | |
| getFullYear | Возвращает год (например, 2011). |
| getYear | Возвращает год. Назначение метода getYear аналогично назначению getFullYear, однако данный метод является устаревшим и не рекомендуются к использованию, т.к. результаты его работы не однозначны: для диапазона дат от 1900 до 1999 года метод возвращает номер года в столетии (двузначный, например 77), а для дат за пределами этого диапазона - возвращается полное значение (четырёхзначное, например 2009). |
| getMonth | Возвращает месяц. |
| getDate | Возвращает день месяца (число в месяце). |
| getHours | Возвращает час. |
| getMinutes | Возвращает минуту. |
| getSeconds | Возвращает секунду. |
| getMilliseconds | Возвращает миллисекунду. |
| getDay | Возвращает номер деня недели. |
| getTime | Возвращает миллисекундное смещение, хранимое объектом. |
| Методы изменения компонентов даты-времени | |
| setFullYear | Устанавливает год. |
| setYear | Устанавливает год. Назначение метода setYear аналогично назначению setFullYear, однако данный метод является устаревшим и не рекомендуются к использованию (так же как и метод getYear). |
| setMonth | Устанавливает месяц. |
| setDate | Устанавливает дату в месяце (день месяца). |
| setHours | Устанавливает час. |
| setMinutes | Устанавливает минуту. |
| setSeconds | Устанавливает секунду. |
| setMilliseconds | Устанавливает миллисекунду. |
| setTime | Устанавливает миллисекундное смещение относительно 00:00:00 01.01.1970 |
| Фунции форматирования и вывода даты-времени | |
| toString | Возвращает строковое представление даты и времени. |
| toUTCString | Возвращает строковое представление даты и времени с пересчётом на время UTC. Формат возвращаемой строки учитывает все интернет-стандарты. |
| toGMTString | Возвращает строковое представление даты и времени с пересчётом на время GMT (время по Гринвичу). Формат возвращаемой строки учитывает все интернет-стандарты. |
| toLocaleString | Аналог toString, но возвращает строковое представление даты и времени, отформатированное в соответствии с настройками локализации данного пользователя. |
| toTimeString | Возвращает строковое представление времени (строка содержит только время). |
| toDateString | Возвращает строковое представление даты (строка содержит только дату). |
| toLocaleTimeString | Аналог toTimeString, но возвращает строковое представление времени, отформатированное в соответствии с настройками локализации пользователя. |
| toLocaleDateString | Аналог toDateString, но возвращает строковое представление даты, отформатированное в соответствии с настройками локализации пользователя. |
| Дополнительные функции | |
| getTimezoneOffset | Возвращает смещение локального времени на компьютере пользователя относительно времени UTC. Смещение возвращается в минутах. |
| parse | Функция позволяет проверить корректность даты-времени, записанных в виде строки. Если строка корректная - сразу будет создан объект Date. |
Так же объект Date содержит ряд методов для работы с UTC-датами. Эти функции полностью аналогичны уже рассмотреным, но содержат в имени префикс "UTC" и работают только с "универсальным" временем: getUTCSeconds, setUTCFullYear и т.д.
Рассмотрим пример работы с датами:
var tmp = new Date(now.getTime()); var arrNames = new Array("Сегодня", "Завтра", "Через 1 год 6 месяцев 15 дней"); var arrNormal = new Array(); var arrLocal = new Array(); var arrUTC = new Array(); // сейчас arrLocal = tmp.toLocaleString(); arrNormal = tmp.toString(); arrUTC = tmp.toUTCString(); // завтра tmp.setDate(tmp.getDate() + 1); arrLocal = tmp.toLocaleString(); arrNormal = tmp.toString(); arrUTC = tmp.toUTCString(); // через 1 год 6 месяцев 15 дней tmp.setFullYear(tmp.getFullYear() + 1); tmp.setMonth(tmp.getMonth() + 6); tmp.setDate(tmp.getDate() + 15); arrLocal = tmp.toLocaleString(); arrNormal = tmp.toString(); arrUTC = tmp.toUTCString(); // выводим результаты в таблицу document.write("
| Дата | " + "Локализованная | " + "Не локализованная | " + "UTC |
| " + arrNames[i] + " | + "" + arrLocal[i] + " | + "" + arrNormal[i] + " | + "" + arrUTC[i] + " | + "
А вот результат работы этого скрипта:
Как видите, представление даты существенно отличается в зависимости от используемого формата. Поэтому при работе с датой-временем надо придерживаться нескольких простых правил:
1. По возможности пользоваться UTC или GMT-форматами. Особенно это важно при создани распределённых решений (например, клиентов платёжных систем). Использование общего опорного времени даст вам гарантии (пусть и не стопроцентные), что и вы и ваш удалённый партнёр будете одинаково интерпретировать получаемые данные.
2. Локализованные дату и время имеет смысл использовать только при выводе их пользователю. Во всех остальных случаях от локализованных данных лучше отказаться.
3. Если всё же приходится использовать локальные дату и время - не забывайте учитывать смещение локального времени относительно опорного (UTC или GMT).
Следование этим правилам избавит вас от большинства логических багов и недочётов, а значит сделает ваш код более стабильным и качественным.
На этом уроке мы познакомимся с объектом Date языка JavaScript и научимся его использовать на практике.
Создание даты – 4 примераВ JavaScript создание даты осуществляется с помощью объекта Date . Объект Date представляет собой точку на оси времени и предназначен для хранения даты и времени с точностью до миллисекунды.
Примеры создания даты в JavaScript.
1. Создание текущей даты и времени.
Получить текущую дату и время в JavaScript осуществляется посредством создания экземпляра объекта Date без указания параметров:
// текущая дата (дата и время, которая была в момент создания экземпляра объекта 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
По-моему, проще некуда, достаточно красиво и понятно. Если у вас нет никакого желания изучать построение этого скрипта, то просто вставляйте его в любое место HTML-страницы и получите следующую надпись:
Еще один вариант более расширенный
//
// ]]>
// ]]>
// ]]>
// ]]>
// ]]>
! Сегодня
// + " " + d.getFullYear() + " г.");
// ]]>
// ]]>
// ]]>
// ]]>
// ]]>
// ]]>
Выглядит он так:
Сегодня
Вобщем не требуется никаких навыков, просто тупо вставляем код и все ок!
Подробнее:Итак, начинаем с присвоения значения даты переменной d , затем создаём массивы (Array ) для дней недели (day ) и месяцев (month ), указывая их в необходимой грамматической форме: падеж, число, заглавная буква, если слово стоит в начале даты и т.п. Последняя строчка скрипта - собственно печать даты (document.write ). Здесь вы устанавливаете, что и в какой последовательности будете выводить в строке текущей даты. Компоненты отделяются друг от друга знаком + . Для ввода пробела используется конструкция " " , а для ввода буквы г (год) - конструкция " г."
Как видно из скрипта, получение данных о текущем времени выполняет элемент get . Этот метод позволяет получить следующую информацию:
- getDate() - возвращает число от 1 до 31, представляющее число месяца;
- getDay() - возвращает день недели как целое число от 0 (воскресенье) до 6 (суббота);
- getMonth() - возвращает номер месяца в году;
- getFullYear() - возвращает год. Если использовать просто getYear() , то будет выводиться текущий год минус 1900;
- get Hours() - возвращает час суток;
- getMinutes() - возвращает минуты как число от 0 до 59;
- getSeconds() - возвращает число секунд от 0 до 59.
Вставлять непосредственно Java -скрипт внутрь страницы сайта не всегда удобно. Лучше поместить описание скрипта в начало страницы между тегами и задать переменную, которую будем вызывать по мере необходимости в тексте. Назовём её TODAY и определим в ней форму вывода даты аналогично вышеизложенному. Скрипт будет выглядеть следующим образом:
Для вывода даты вызываем скрипт в нужном месте HTML-кода страницы, используя следующую команду:
document.write(TODAY);
Если ваш сайт содержит много страниц, на которых надо показывать дату, то удобнее выделить Java -скрипт вывода даты в отдельный файл, например, data.js . Практически, это страница, состоящая из первого из описанных скриптов, то есть со строкой document.write (см. выше). Располагать её надо в том же каталоге, что и основная страница, и вызывать в месте вывода даты следующим образом:
Не забудьте проверить, чтобы файл data.js имел ту же кодировку, что и основной документ, иначе дата будет выводиться замечательными крючками, квадратиками и прочими финтифлюшками.
Замечание. Следует иметь ввиду, что описанный скрипт выводит дату, установленную на компьютере пользователя, что не всегда соответствует реальному текущему времени. Если вам необходимо показать точное время, то необходимо использовать РНР-скрипт, который будет показывать время на сервере.
