Налаштування обладнання та програмного забезпечення

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.

Javascript дата

Тепер напишемо саму функцію Давайте напишемо сценарій, який визначатиме поточну дату і виводитиме її у форматі "число місяць рік".:

Код html-сторінки буде простий:

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; "; break; case 5: s="червня"; break; case 6: s="липня"; break; case 7: s="серпня"; break; case 8: s="вересня"; break; case 9 : s="жовтень"; break; s="листопада"; =result;

  • Вийшло справжнє, ніж у першому прикладі, т.к. доводиться перекладати російською мовою назви місяців.Розглянуті вище методи дають змогу отримувати дату. Якщо нам потрібно встановити дату, слід використовувати такі методы:
  • setDate- Встановлює число місяця в діапазоні від 1 до 31.
  • setHours- встановлює годину для поточного часу в діапазоні від 0 (північ) до 23.
  • setMinutes- Встановлює хвилини в діапазоні від 0 до 59.
  • setSeconds- Встановлює секунди в діапазоні від 0 до 59.
  • setYear- Встановлює значення року.
  • setMonth- Встановлює значення місяця в діапазоні від 0 (січень) до 11 (грудень). Date setTime
- Встановлює значення об'єкта

та повертає кількість мілісекунд, що пройшли з 1 січня 1970 року.

Так, якщо нам потрібно буде задати дату 06 грудня 2010 року, у функції ми матимемо наступний код:

Var t = New Date ();

var y=t.setYear(2010);

var d=t.setDate(6);

Цю ж дату можна задати за допомогою чисел, перерахувавши через кому рік, місяць, число, години, хвилини, секунди:

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 + " c = new Date (2000, 5, 20, 12, 20, 55, 97);\n "

+ b + "

+ c);Добре, тепер розглянь основні методи класу Date JS мови.

getFullYear()– Номер поточного року у чотиризначному форматі.

getDate()– Поверне номер поточної дати (від 1 до 31).

getMonth()- Номер дня тижня (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 = "Рік //js var gFullYear, gDate, gMonth, gDay, gHours, gMinutes, gSeconds, gMilliseconds, MyArr, index, list="" ;\t \t " //js var gFullYear, gDate, gMonth, gDay, gHours, gMinutes, gSeconds, gMilliseconds, MyArr, index, list="" ;+ js_new_date.getFullYear(); gDate = "Дата+ js_new_date.getDate(); //js var gFullYear, gDate, gMonth, gDay, gHours, gMinutes, gSeconds, gMilliseconds, MyArr, index, list="" ; gMonth = "Місяць //js var gFullYear, gDate, gMonth, gDay, gHours, gMinutes, gSeconds, gMilliseconds, MyArr, index, list="" ;+ js_new_date.getMonth(); //js var gFullYear, gDate, gMonth, gDay, gHours, gMinutes, gSeconds, gMilliseconds, MyArr, index, list="" ; gDay = "День тижня t"+ js_new_date.getDay(); gHours = "Годинник+ js_new_date.getHours(); c = new Date (2000, 5, 20, 12, 20, 55, 97);

gMinutes = "Хвилини

+ js_new_date.getMinutes(); gSeconds = "Секунди

//********************************** + js_new_date.getSeconds(); //********************************** gMilliseconds =<= 100000 ; i++ ) { summ+= i; } //Конец end_time = (new Date () ) .getTime () ; "Міллісекунди\t \"+ js_new_date.getMilliseconds(); //Зберігаємо все в масиві MyArr = [ gFullYear, gDate, gMonth, gDay, gHours, gMinutes, gSeconds, gMilliseconds] для (var index in my_arr) ( list+= MyArr[ index] + "

Бачимо, що тут ми оголосили ряд змінних 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// Час виконання циклу

//********************************** time_elapsed = end_time - to_time; WScript.Echo ("Цикл виконувався:" //********************************** + time_elapsed + "мілісекунд"); //Зміщення для поточного періоду 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 + " c = new Date (2000, 5, 20, 12, 20, 55, 97);+ 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; gHours = "Годинник//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(); c = new Date (2000, 5, 20, 12, 20, 55, 97); toLDS = js_date_gettime.toLocaleDateString();

toLS = js_date_gettime.toLocaleString();

toLTS = js_date_gettime.toLocaleTimeString();

У 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(31536000

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 методи, що виконують перетворення дати в рядок, можна поділити на дві групи.

До першої групи можна віднести методи, які виконують це так, як це визначено у браузері: 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)
Форматування
Native JS x 1,637,517 ops/sec ±0.61% (100 runs sampled) Moment x 8,808 ops/sec ±1.07% (100 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)
Парсинг дати за форматом
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%
Результати отримані на моєму ноутбуці 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"); // Або так // "Октябрь, 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(); // Отримуємо об'єкт з помилками

Іноді потрібно отримати кількість років (наприклад, вік), місяців, днів і т.д. між двома датами. Для цього ми можемо використовувати метод між тим, що знаходить різницю між двома датами і повертає в потрібному форматі ("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, місяць: 1, день: 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, місяць: 1, день: 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", період: (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)). floor((Math.random()*(date.dayCount() - tempus.MIN_DAY)) + tempus.MIN_DAY)). ) + tempus.MIN_HOURS)). *(tempus.MAX_SECONDS - tempus.MIN_SECONDS)) + tempus.MIN_SECONDS)); // Тепер ми можемо створювати дати так 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і ми все виправимо!