Вывод время и даты в javascript. JavaScript Получить текущее время и дату. Получить текущий час

Всем привет!
Мне часто приходится работать со статистическими данными и там очень много завязано на датах. Притом, одна и та же дата может быть использована на странице в разных форматах (например, в удобном для машины и в удобном для человека). Я думаю, что большинство из вас отлично представляют весь этот ужасающий по размерам код, который получается при использовании объекта Date.
К примеру, чтобы получить текущую дату в формате ДД.ММ.ГГГГ нам потребуется сделать следующее:
var d = new Date(), fd = d.getDate() + "." + (d.getMonth()+1) + "." + d.getFullYear();
А когда таких строк становится много? Легко ли упомнить, что в javascript месяц начинается с нуля, когда разрабатываешь не только на нем? Или то, что тут миллисекунды, а не секунды, как почти везде на бэкенде? Можно решить часть задач популярной библиотекой Moment.js , но она работает весьма медленно.
Рассматриваемая библиотека решает эти проблемы.
Если интересно, предлагаю вам прочитать этот небольшой обзор.

TempusJS во многом состоит из синтаксического сахара над объектом Date, поэтому работает очень быстро. Синтаксис же самой библиотеки весьма прост. Например, записать предыдущий пример, можно так:
var fd = tempus().format("%d.%m.%Y");
Теперь о скорости. В спойлере вы можете увидеть сравнение Tempus с Moment и нативным способом форматирования даты (см. выше):

Сравнение нативного JS, MomentJS и TempusJS

Получаем текущую дату
Native JS x 2,175,575 ops/sec ±0.75% (96 runs sampled) Moment x 284,864 ops/sec ±0.85% (96 runs sampled) Tempus x 2,086,081 ops/sec ±0.73% (97 runs sampled)
Форматирование
Native JS x 1,637,517 ops/sec ±0.61% (100 runs sampled) Moment x 8,808 ops/sec ±1.07% (100 runs sampled) Tempus x 942,815 ops/sec ±0.68% (94 runs sampled)
Автоопределение даты и парсинг
Native JS x 11,204,316 ops/sec ±0.81% (88 runs sampled) Moment x 38,511 ops/sec ±1.41% (95 runs sampled) Tempus x 93,973 ops/sec ±1.06% (85 runs sampled)
Парсинг даты по формату
Moment x 46,293 ops/sec ±0.63% (100 runs sampled) Tempus x 109,947 ops/sec ±0.93% (99 runs sampled)
Парсинг и валидация
Moment x 44,588 ops/sec ±1.09% (90 runs sampled) Tempus x 103,439 ops/sec ±0.90% (94 runs sampled)
Результаты получены на моем ноутбуке в Google Chrome 30.0.1599.114. В других браузерах результаты отличаются, но соотношение остается примерно тем же.
Для тестов использовалась библиотека benchmark.js
Бенчмарки по другим функциям, вы можете увидеть .

Итак, в преимущества данной библиотеки можно записать следующее:

  • Поддерживает IE6+, Chrome, Firefox, Opera;
  • Поддерживает цепочки вызовов;
  • Месяцы могут начинаться с 1 (по умолчанию), а не нуля;
  • Миллисекунды могут быть отключены (по умолчанию) или включены;
  • Быстрая работа (Так как, во многих случаях, используется родной для браузера объект Date, реализация которого написана на более быстрых языках);
  • Поддерживает кастомные форматы и плагины
  • Валидация даты очень быстра и зависит только от устанавливающих дату функций (т.к. валидация проходит уже при занесении значений, а не высчитывается отдельно);
  • Мультиязычность и автоопределение языка пользователя.

Здесь речь пойдет только о некоторых функциях.

Форматирование и парсинг

Итак, для начала еще один пример форматирования даты. Здесь мы также используем цепочку вызовов. В конце каждой установки значения, мы получаем обратно объект TempusDate, который можем использовать дальше в цепочке. Пример:
tempus(). // получаем новую дату calc({month: -1}). // уменьшаем ее на один месяц format("%d.%m.%Y"); // Выводим в виде строки
Таким образом, мы получим этот же день, час и секунду, но месяц назад. Это бывает полезно для получения отчетов за последний месяц.

Следующий пример - парсинг даты.
// Вернет объект TempusDateс датой "2013-11-18" tempus("18.11.2013"); // Вернет объект TempusDateс датой "2013-12-12" tempus("2013-12-12", "%Y-%m-%d"));
Tempus может автоматически определять некоторые известные форматы. Также, можно указывать определенный формат, тогда парсинг будет происходить быстрее. Плюс к этому, можно задавать дату, которая будет возвращена, если парсинг завершится неудачей:
// Т.к. "123" не подходит к формату "%d.%m.%Y", то // будет возвращен объект, содержащий дату 2013-01-01 tempus("123", "%d.%m.%Y", tempus());
Список форматов по умолчанию можно посмотреть

А теперь поменяем формат уже отформатированной даты
// "2013-11-05" tempus("05.11.2013").format("%Y-%m-%d"); // Или так // "October, 12" tempus("2013-10-12 12:31:01", "%Y-%m-%d %H:%M:%S").format("%B, %d");

Также, можно использовать локализацию для форматирования. По умолчанию, будет выбран язык пользователя (берем из браузера) или язык по умолчанию, если язык пользователя не обнаружен среди доступных языков Tempus.
// Устанавливаем язык tempus.lang("ru"); // Стандартно используем format // "Ноябрь, 05" tempus(1383609600).format("%B, %d");
На данный момент языков всего два - русский и английский, так что буду рад помощи.

Валидация

Валидация даты происходит следующим образом:
// Вернет false tempus("32.08.2013", "%d.%m.%Y").valid(); // Вернет true tempus("00:00 01.01.2012", "%H:%M %d.%m.%Y").valid();

В случае ошибки, можно посмотреть поля, в которых она возникла - везде, где значение не false:
// Вернет {"year":-5,"month":false,"day":false,"hours":false, // "minutes":false,"seconds":false,"milliseconds":false} tempus(). year(-5). // задаем год=-5, т.е. невалидный errors(); // получаем объект с ошибками

Диапазоны дат

Иногда нам требуется получить количество лет (например, возраст), месяцев, дней и т.д. между двумя датами. Для этого мы можем использовать метод between, который находит разницу между двумя датами и возвращает в нужном формате ("year", "month", "day", "hours", "minutes", "seconds", "milliseconds").
Вот простой пример получения количества месяцев между 1 ноября 2013 года и 5 мая 2014 года:
// Вернет 6 tempus().between(tempus(), "month");
Или сколько часов осталось до нового года
tempus().between(tempus(), "hours");
В последнем примере можно заметить, что я указал только год. При установке значения массивом или объектом, нехватающие значения будут
заполнены минимальными. Список констант с минимальными значениями, вы можете увидеть в документации.

Также, мы можем изменить какую-либо дату, используя функцию calc:
// Вернет TempusDate с датой 2012-01-01 tempus().calc({year: 1, month: -4, day: -1});

Свои форматы

Применяем свой формат для месяца, который может принимать значения от 1 до 12 (а не 01 до 12):
// Регистрируем новый формат tempus.registerFormat("%q", // директива - %q function(date) { // Здесь указываем функцию форматирования, т.е. что будет подставлено вместо %q return date.month(); }, function(value) { // А здесь функцию парсинга var v = Number(value); return {month: (isNaN(v) ? undefined: v) }; }, 1, // Минимальная длина, которую может принимать значение 2, // Максимальная длина "number" // Тип); // Тестируем // Вернет "01.1.2013"; tempus({year: 2013, month: 1, day: 1}).format("%d.%q.%Y"); // Вернет {"year":2013,"month":2,"day":10,"hours":0,"minutes":0,"seconds":0}; tempus("10.2.2013", "%d.%q.%Y").get();
При регистрации можно заметить, что некоторые параметры задаются отдельно, в то время, как можно было бы использовать регулярное выражение. На самом деле, там изначально оно и было, но после отказа от него, скорость выросла в несколько десятков раз.
Если вам потребуется удалить какой то формат, то используйте unregisterFormat:
tempus.unregisterFormat("%d"); // Вернет "%d.01.2013", т.к. директивы %d уже не существует. tempus.format({year: 2013, month: 1, day: 1}, "%d.%m.%Y");

Геттеры/сеттеры

Можно получать/устанавливать некоторые значения, используя функции year(), month(), day(), hours(), minutes(), seconds(), milliseconds(), dayOfWeek(), utc(), timestamp() или set(). Например:
tempus(). // Получаем текущую дату year(1900). // Оставляем все как есть, но устанавливаем 1900 год leapYear(); // Проверяем, високосный ли это год, в данном случае false tempus().year(); // А так получаем текущий год в числовом виде

Генерация дат

Вы можете сгенерировать дату множеством способов, полный список параметров находится в документации. Здесь представлен минимальный пример.
// returns ["29.03.2013", "30.03.2013", "31.03.2013", "01.04.2013", "02.04.2013"]; tempus.generate({ dateFrom: "20130329", formatFrom: "%Y.%m.%d", dateTo: "20130402", period: {day: 1}, format: "%d.%m.%Y" });
Это может быть полезно для отображения графиков по датам и смена формата отображения прямо на клиенте, без запросов к бэкенду. Дата может быть сгенерирована как массив, так и как объекты, где в качестве ключей будут сами даты (это полезно, когда нам требуется к какой-либо дате привязать какое-либо событие, например, когда делаем свой календарь). Также, даты могут быть сгруппированы по дням, неделям, месяцам, часам, годам - по чему угодно. Это также может быть применено к календарю.

Плагины

Ну и последнее - плагины. Здесь мы расширяем фабрику, для генерации случайной даты. Также, нам потребуется класс TempusDate, его можно найти в tempus.classes(). Вот пример плагина:
(function (tempus) { var TempusDate = tempus.classes("TempusDate"); tempus.randomDate = function() { var date = new TempusDate(); date.year(Math.floor((Math.random()*(tempus.MAX_YEAR - tempus.MIN_YEAR)) + tempus.MIN_YEAR)). month(Math.floor((Math.random()*(tempus.MAX_MONTH - tempus.MIN_MONTH)) + tempus.MIN_MONTH)). day(Math.floor((Math.random()*(date.dayCount() - tempus.MIN_DAY)) + tempus.MIN_DAY)). hours(Math.floor((Math.random()*(tempus.MAX_HOURS - tempus.MIN_HOURS)) + tempus.MIN_HOURS)). minutes(Math.floor((Math.random()*(tempus.MAX_MINUTES - tempus.MIN_MINUTES)) + tempus.MIN_MINUTES)). seconds(Math.floor((Math.random()*(tempus.MAX_SECONDS - tempus.MIN_SECONDS)) + tempus.MIN_SECONDS)); return date; }; })(tempus); // Теперь мы можем создавать даты следующим образом var someRandomDate = tempus.randomDate();
Думаю, что таким способом можно будет удобно писать виджеты, используя связку jQuery+Tempus, Angular+Tempus и т.п.

Исходники

Установить можно, скачав исходники с гитхаба:
https://github.com/crusat/tempus-js/releases
Или через bower:
$ bower install tempus
Вам потребуется только один файл - tempus.js или tempus.min.js.

Надеюсь, что данная библиотека окажется полезной, а также интересно было бы узнать, чего в ней не хватает, чтобы дальше развивать библиотеку в правильном направлении. Спасибо за внимание!
P.S. Спасибо за инвайт!

На этом уроке мы познакомимся с объектом 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 <= 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);

Получить количество миллисекунд прошедших с 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 [, ) – устаналивает минуты от 0 до 59 (дополнительно можно установить ещё секунды и миллисекунды);
  • setSeconds(sec, ) – устанавливает секунды от 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() всё равно может выполнить её преобразование, но результат в этом случае могут оказаться непредсказуемым.

Редкому программисту случается избежать работы с датой и временем. Вообще, дата/время - базовое понятие и в основной массе языков существуют встроенные механизмы работы с этим типом данных. Казалось бы, 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 - Урок 11. Дата, представление и обработка

В JavaScript дата определяется количеством миллисекунд, прошедших с 1 января 1970 года.

Для работы с датой и временем применяется встроенный объект Date . Этот объект не имеет свойств, но обладает несколькими методами, позволяющими устанавливать и изменять дату и время.

Объект Date создается с помощью оператороа new и конструктора - Date .

Например:

var myData=new Date();

Значением переменной myData будет текущая дата и время:

Методами объекта Date можно получать отдельно значения месяца, дня недели, часов, минут и секунд:

  • getDate - возвращает число в диапазоне от 1 до 31, представляющее число месяца.
  • getHours - возвращает час суток в диапазоне от 0 (полночь) до 23.
  • getMinutes - возвращает минуты в диапазоне от 0 до 59.
  • getSeconds - возвращает секунды в диапазоне от 0 до 59.
Предположим, мы хотим написать сценарий, который будет определять текущее время и выводить его в формате "чч:мм:сс".

Javascript дата

Теперь напишем саму функцию nTime() :

function nTime(obj) { var t=new Date(); var h=t.getHours(); var m=t.getMinutes(); var s=t.getSeconds(); var result=h+":"+m+":"+s; obj.res.value=result; }

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

Здесь еще хочется пояснить строку var result=h+":"+m+":"+s . Впервые мы столкнулись с необходимостью выводить в результат, как значения переменных, так и простой текст. В принципе ничего сложного: переменные пишутся как есть, текст берется в кавычки, а знак + осуществляет операцию конкатенации, т.е. их объединения.

В нашем примере остался один недочет, мы хотели, чтобы время выводилось в формате "чч:мм:сс", а сейчас оно выводится в формате "ч:м:с". Т.е., в 5 утра, время будет отображаться как "5:0:0", а хотелось бы так: "05:00:00" (что более привычно). В качестве домашнего задания можете попробовать это исправить. Например, с помощью оператора if и строкового литерала "0" (идея проста: если часов меньше 10, то в результат перед h написать "0" и так со всеми переменными).

А пока продолжим изучать методы объекта Date :

  • getDay - возвращает день недели, как целое число от 0 (воскресенье) до 6 (суббота).
  • getMonth - возвращает номер месяца в году, как целое число от 0 (январь) до 11 (декабрь).
  • getYear - возвращает год в виде двух последних цифр (getFullYear - возвращает год в виде четырех цифр).

    * К сожалению, начиная с 2000 года, есть проблема с отображением года в разных браузерах. Метод getYear в IE отображает полный год (вместо двух последних цифр), а FireFox вместо XX отображает 1XX (т.е. подставляет 1). Поэтому предпочтительнее использовать метод getFullYear.

Давайте напишем сценарий, который будет определять текущую дату и выводить ее в формате "число месяц год".

Код html-страницы будет простой:

Javascript дата

Теперь напишем саму функцию tData() :

Function tData(obj) { var s; var t=new Date(); var y=t.getFullYear(); var d=t.getDate(); var mon=t.getMonth(); switch (mon) { case 0: s="января"; break; case 1: s="февраля"; break; case 2: s="марта"; break; case 3: s="апреля"; break; case 4: s="мае"; break; case 5: s="июня"; break; case 6: s="июля"; break; case 7: s="августа"; break; case 8: s="сентября"; break; case 9: s="октября"; break; case 10: s="ноября"; break; case 11: s="декабря"; break; } var result=d+" "+s+" "+y; obj.res.value=result; }

Получилось подлиннее, чем в первом примере, т.к. приходится переводить на русский язык названия месяцев.

Рассмотренные выше методы позволяют получать дату. Если же нам потребуется установить дату, то следует использовать следующие методы:

  • setDate - устанавливает число месяца в диапазоне от 1 до 31.
  • setHours - устанавливает час для текущего времени в диапазоне от 0 (полночь) до 23.
  • setMinutes - устанавливает минуты в диапазоне от 0 до 59.
  • setSeconds - устанавливает секунды в диапазоне от 0 до 59.
  • setYear - устанавливает значение года.
  • setMonth - устанавливает значение месяца в диапазоне от 0 (январь) до 11 (декабрь).
  • setTime - устанавливает значение объекта Date и возвращает количество миллисекунд, прошедших с 1 января 1970 года.
Так, если нам потребуется задать дату 06 декабря 2010 года, в функции мы будем иметь следующий код:

Var t=new Date(); var y=t.setYear(2010); var d=t.setDate(6); var mon=t.setMonth(11); ...

Задать дату можно прямо в конструкторе, указав в качестве параметра строку формата "месяц, день, год часы:минуты:секунды":

Var t=new Date("Feb,10,1975 17:45:10");

Значение часов, минут и секунд можно опустить (они будут равны нулю):

Var t=new Date("Feb,10,1975");

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

Var t=new Date(75, 1, 10, 17, 45, 10);

Или же, опуская часы, минуты и секунды (они будут равны нулю):

Var t=new Date(75, 1, 10);

* Есть проблема: IE год отображать не хочет, поэтому лучше эти варианты не использовать.

Вот собственно и все, вы вполне готовы самостоятельно написать сценарий, который при загрузке страницы отобразит дату, время и день ее посещения (в нормальном русском виде). Удачи!