Настройка оборудования и программного обеспечения

TempusJS — работаем с датой в javascript. JavaScript Получить текущее время и дату Получение отдельных компонентов даты и времени

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 год отображать не хочет, поэтому лучше эти варианты не использовать.

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

Доброго времени суток всем подписчикам и читателям блога сайт. В этой статье мы изучим встроенный объект языка программирования jscript – Date.

Объект JS Date предназначен для работы с датой и временем и для преобразования строк в формат даты. При создании класса Date, jscript использует ключевое слово new и один из трёх видов конструкторов, давайте посмотрим на их общий синтаксис:

Класс JS DATE – дата и время

Date () – в данном случае будет произведен вывод текущей даты и времени js в формате: <название дня><название месяца><дата1><время1><год>, время задается по Гринвичу, т. е. с использованием UTC (UCT - Universal Coordinated Time).

Date (nMilliseconds) – Как видим, тут мы передаем один параметр nMilliseconds, который задает дату1 в миллисекундах, считая от 1 января 1970 года

Date (year, month, date [, hours [, min [, sec [, ms]]]]) – Тут мы видим, что конструктору передаются несколько параметров, что позволяет задать вручную все значения даты и времени js:

  • year - Год в четырехзначном формате, например 1998 (но не 98).
  • month - Номер месяца от 0 (январь) до 11 (декабрь).
  • date - Календарная дата1 в диапазоне от 1 до 31.
  • hours - Час дня в диапазоне от 0 до 23.
  • min - Минуты в диапазоне от 0 до 59.
  • sec – Количество секунд в диапазоне от 0 до 59.
  • ms – Число миллисекунд в диапазоне от 0 до 999.

Хорошо, давайте посмотрим на следующий пример использования класса JS DATE в сценарии на языке программирования , который работает под управлением сервера :

// Объект JS Date // 1_date.js //********************************** var a, b, c //Текущая дата1 и время1 a = new Date () ; //js //Период через 1000 мс после 1 января 1970 года b = new Date (1000 ) ; //Собственная временная дата2 c = new Date (2000 , 5 , 20 , 12 , 20 , 55 , 97 ) ; WScript.Echo (a + "\n " + b + "\n " + c) ;

Хорошо, теперь давайте рассмотри основные методы класса Date JS языка.

getFullYear () – Номер текущего года в четырехзначном формате.

getDate () – Вернёт номер текущей даты (от 1 до 31).

getMonth () – Номер текущего месяца (от 1 до 12).

getDay () - Номер дня недели (0 для воскресения, 1- для понедельника. и т. д.).

getHours () – Количество часов (отсчет начинается с полуночи).

getMinutes () - Вернёт количество минут (отсчет начинается с начала часа).

getSeconds () - Число секунд (отсчет идет с начала минуты).

getMilliseconds () - Число миллисекунд.

Давайте рассмотрим следующий пример сценария, который демонстрирует работу с вышеописанными методами класса Date:

//********************************** // Объект JS Date // 2_date.js //********************************** var js_new_date = new Date ; //js var gFullYear, gDate, gMonth, gDay, gHours, gMinutes, gSeconds, gMilliseconds, MyArr, index, list= "" ; gFullYear = "Год\t \t " + js_new_date.getFullYear () ; gDate = "Дата\t \t " + js_new_date.getDate () ; gMonth = "Месяц\t \t " + js_new_date.getMonth () ; gDay = "День недели\t \t " + js_new_date.getDay () ; gHours = "Часы\t \t " + js_new_date.getHours () ; gMinutes = "Минуты\t \t " + js_new_date.getMinutes () ; gSeconds = "Секунды\t \t " + js_new_date.getSeconds () ; gMilliseconds = "Миллисекунды\t \t " + js_new_date.getMilliseconds () ; //Сохраняем всё в массиве MyArr = [ gFullYear, gDate, gMonth, gDay, gHours, gMinutes, gSeconds, gMilliseconds] for (var index in my_arr) { list+= MyArr[ index] + "\n "

Видим, что тут мы объявили ряд переменных jscript, которые хранят значения, возвращаемые функциями класса Date() JS языка, далее, все переменные мы прописали в массив MyArr (детальное описание массивов есть в статье " "), доступ к нему осуществляется через цикл for in (данный цикл я описал в статье " "). В самом конце мы выводим список значений для всех переменных.

getTime () – Количество миллисекунд, которые прошли с 1 января 1970 года. Он идеально подходит для вычисления времени работы блока кода.

//********************************** // js date // Метод getTime() // 3_date.js //********************************** var to_time, end_time, time_elapsed, summ= 0 ; //Начало to_time = (new Date () ) .getTime () ; for (var i= 0 ; i<= 100000 ; i++ ) { summ+= i; } //Конец end_time = (new Date () ) .getTime () ; // Время выполнения цикла time_elapsed = end_time - to_time; WScript.Echo ("Цикл выполнялся: " + time_elapsed + " миллисекунд" ) ;

Если вы внимательно посмотрите на данный сценарий, то увидите, что мы дважды объявляли объект Date в JS сценарии . Если этого не сделать, то функция getTime будет как вначале, так и в конце цикла возвращать одно значение .

getTimezoneOffset () – Вернёт разницу в минутах относительно локального времени и универсального (по Гринвичу).

//********************************** // Объект JS DATE // Метод getTimezoneOffset() // getTimezoneOffset_date.js //********************************** var time_zone, time_zone_cur //Смещение для текущего периода time_zone_cur = (new Date () ) .getTimezoneOffset () //js new date //Смещение для заданной даты time_zone = (new Date (2000 , 5 , 20 , 12 , 20 , 55 , 97 ) ) .getTimezoneOffset () WScript.Echo (time_zone + "\n " + time_zone_cur) ;

toDateString () – Данная функция объекта Date в js сценарии вернёт строку, которая будет представлять дату2 для локального часового пояса.

toGMTString () – Аналог предыдущей функции, но за основу взят часовой пояс GMT (формат времени по Гринвичу).

toLocaleDateString () - Данный метод Date языка js вернёт строку, которая будет представлять дату2 для локального часового пояса согласно региональным настройкам системы.

toLocaleString () – Преобразует дату в строку в соответствии с локальным часовым поясом и локальными соглашениями о форматировании дат.

toLocaleTimeString () – Вернёт строку, которая содержит время из даты в локальном часовом поясе на основе локальных соглашений о форматировании времени.

toString () – Преобразование даты в строку.

toTimeString () – Преобразование времени из даты2 в строковый формат.

toUTCString () – Преобразует дату в строчный формат, при этом, используется универсальное время.

Возможно, приведенные функции выше вам покажутся однообразными и запутанными. Поэтому, чтобы не писать под каждый метод пример, я написал простой сценарий, в котором привел пример работы сразу всех методов:

//********************************** // JS DATE // Преобразование даты2 в строку2 // 4_toStr_date.js //********************************** var js_date_gettime = new Date ; //js var toDS, toGMTS, toLDS, toLS, toLTS, toS, toTS, toUTCS, MyArr1, index, list= "" ; // js date to string toDS = js_date_gettime.toDateString () ; toGMTS = js_date_gettime.toGMTString () ; toLDS = js_date_gettime.toLocaleDateString () ; toLS = js_date_gettime.toLocaleString () ; toLTS = js_date_gettime.toLocaleTimeString () ; toS = js_date_gettime.toString () ; toTS = js_date_gettime.toTimeString () ; toUTCS = js_date_gettime.toUTCString () ; //Сохраняем всё в массиве MyArr1 = [ toDS, toGMTS, toLDS, toLS, toLTS, toS, toTS, toUTCS] //Получаем доступ к каждому элементу массива for (var index in my_arr) { list+= MyArr1[ index] + "\n " ; } //Выводим список WScript.Echo (list) ;

На этом уроке мы познакомимся с объектом 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() всё равно может выполнить её преобразование, но результат в этом случае могут оказаться непредсказуемым.

Всем привет!
Мне часто приходится работать со статистическими данными и там очень много завязано на датах. Притом, одна и та же дата может быть использована на странице в разных форматах (например, в удобном для машины и в удобном для человека). Я думаю, что большинство из вас отлично представляют весь этот ужасающий по размерам код, который получается при использовании объекта 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. Спасибо за инвайт!

Понравилась статья? Поделитесь с друзьями!
Была ли эта статья полезной?
Да
Нет
Спасибо, за Ваш отзыв!
Что-то пошло не так и Ваш голос не был учтен.
Спасибо. Ваше сообщение отправлено
Нашли в тексте ошибку?
Выделите её, нажмите Ctrl + Enter и мы всё исправим!