Vanilla JavaScript: Як працювати з датами та часом

Об'єкт Date в JavaScript представляє момент часу. Хоча має корисні функції, працювати з ним складно. Ми розглянемо, як створити новий об'єкт Date та, сподіваюся, зробити його трохи простіше у використанні.

Конструктор new Date()

Ви можете використовувати конструктор new Date() для створення об'єкта Date JavaScript.

Ви можете передати конкретну дату (і, можливо, час) у різних форматах. Якщо ви не передасте аргументи, він створить об'єкт Date для поточного моменту.

В якості альтернативи ви можете передати рядок дати як аргумент. Вам не потрібно вказувати конкретний час, але якщо ви це зробите, необхідно використовувати 24-годинний формат.

Результуючий об'єкт Date відноситься до вашого поточного часового поясу.

// Створення об'єкта date для поточного часу

let now  =
new
Date();



// Створення об'єкта date для Хеллоуїна

let halloween  =
new
Date('Жовтень 31, 2022');



// Створення об'єкта date для 21 Березня, 2023, 14:00

let springLuncheon  =
new
Date('March 21, 2023 14:00');

Для більшої точності у браузерах та операційних системах рекомендується використовувати формат дати та часу ISO 8601: YYYY-MM-DDTHH:MM:SS.

Перша частина (YYYY-MM-DD) - це рік (YYYY), місяць (MM) і число (DD). T означає час. Після нього ( HH:MM:SS ) - це годинник ( HH ), хвилини ( MM ) і секунди ( SS ) в 24-годинному форматі, і вони повинні бути включені, інакше об'єкт Date, що повертається в JavaScript, буде неточним. Використовуйте 00:00:00 для опівночі.

// Новий рік, опівночі

let newYears  =
new
Date('2024-01-01T00:00:00');



// 4 Липня, опівдні

let summerParty  =
new
Date('2023-07-04T12:00:00');

Ви також можете створити об'єкт Date в JavaScript, передавши ряд аргументів: рік (year), індекс місяця (monthIndex), день (day), годинник (hours), хвилини (minutes), секунди (seconds), і мілісекунди (milliseconds).Тільки роки та місяцьIndex обов'язкові параметри.

Аргумент monthIndex може трохи збивати з пантелику, тому що він починається з січня з 0 замість 1 .

// Зверніть увагу, що місяць індексу дорівнює 9, хоча це Жовтень - 10-й місяць

let halloween  =
new
Date(2021,
9,
31);



// Різдвяний ранок о 10:30 за місцевим часом

let christmas  =
new
Date(2021,
11,
25,
10,
30);

Мітки часу Unix / Unix Timestamp

Під капотом об'єкт Date JavaScript зберігає момент часу у вигляді Unix Timestamp , кількість мілісекунд минулих з 1 січня 1970 року.

Ви можете отримати Unix Timestamp з об'єкта Date, використовуючи метод Date.getTime().

let halloween  =
new
Date('Жовтень 31, 2023');



// Поверне 1698724800000

let timestamp  = halloween.getTime();

Ви можете передати Unix Timestamp до конструктора new Date() для створення об'єкта Date .

let earthDay  =
new
Date(1682136000000);

У багатьох мовах програмування тимчасові мітки Unix відстежуються в секундах, а не в мілісекундах.

Якщо ви створюєте в javaScript об'єкт Date з тимчасової мітки, наданої сервером або API, важливо знати, в секундах вона або мілісекундах. Якщо це секунди, то потрібно помножити на 1000 для перетворення в мілісекунди.

let timestamp  =
1682136000;

let someDate  =
new
Date(timestamp  *
1000);

Дата та час у JavaScript

У JavaScript існує вбудований об'єкт Date для обробки всіх операцій, пов'язаних із датою та часом. Наприклад, ви можете використовувати його для відображення поточної дати та часу, створення календаря, побудови таймера та багато іншого.

Як створити об'єкт Date

Щоб дізнатися, як створити новий об'єкт Date, виконайте кроки нижче.

Зауважте, що оператор new зазвичай використовується для створення об'єкта дати.

Викличте new Date () , вибравши один із таких аргументів:

Ви можете створити об'єкт Date для поточної дати та часу без аргументів, як це показано тут:

Ця дія повертає поточну дату з часом та тимчасовою зоною.

Можна виділити інші способи створення Date за допомогою оператора new.

Нова дата з мілісекундами

Створення об'єкта Date з часом, рівним числу мілісекунд, що пройшли після 1 січня 1970 року за UTC+0.

// 0 means 01.01.1970 UTC + 0 let startDate = New Date (0); console.log(startDate); // now add 24 hours, get 02.01.1970 UTC + 0 let startTime = New Date (24 * 3600 * 1000); console.log(startTime);

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

Створення об'єкта Date за допомогою dateString

Можна створити об'єкт Date , передавши строкове уявлення дати. Рядкове уявлення буде прийнято, якщо його можна проаналізувати за допомогою Date.parse() .

let date = new Date("2019-12-26"); console.log(date); //The isn't a fixed time, so it's expected to be midnight GMT and // is modified according to the timezone, у яких the code is run // So the result could be // Thu Dec 26 2019 04:00: 00 GMT+1100 (Australian Eastern Daylight Time)

Допустимо наступний формат: new Date(year, month, date, hours, minutes, seconds, ms) . Ви також повинні дотримуватися цих правил:

• Year має складатися з чотирьох цифр (наприклад, 2020);
• Рахунок month повинен починатися з 0 (Наприклад, 0 це січень, а 11 це грудень);
• День місяця – це параметр date; якщо його немає, ви повинні припустити 1.
• Якщо hours/minutes/seconds/ms відсутні, ви повинні припустити, що вони рівні 0.

new Date(2019, 0, 1, 0, 0, 0, 0); // 1 Jan  2019, 00:00:00
new Date(2019, 0, 1); // the same, hours etc are  0 by default

Мінімальна точність має бути однією мілісекундою.

Доступ до компонентів дати

Тепер ми дізнаємось про способи доступу до компонентів даних. Ось вони:

отримання року (має бути 4 цифри).

одержання місяця (від 0 до 11).

одержання дня місяця (від 1 до 31).

getHours(), getMinutes(), getSeconds(), getMilliseconds()

одержання відповідних компонентів часу.

Важливо використовувати getFullYear() , а не getYear() , оскільки останній застарів і іноді може повертати рік з 2 цифр. Тому його краще ніколи не використовувати у практиці.

Крім того, можна навіть отримати день тижня, викликавши:

Це дозволить вам отримати день тижня від неділя 0 до субота 6.

Як встановити компоненти дати

У JavaScript використовуються кілька методів для встановлення компонентів дати та часу. Серед них:

setFullYear(year,  [month], [date]) setMonth(month, [date]) setDate(date) setHours(hour, [min], [sec], [ms]) setMinutes(min, [sec], [ms])

Деякі методи можуть встановлювати кілька компонентів одночасно. Наприклад, setHours .

let today = новий Date(); today.setHours(0); console.log(today); // Still today, but the hour is changed to 0 today.setHours(0, 0, 0, 0); console.log(today); // still today, now 00:00:00 sharp.

Автокорекція

Зручною функцією об'єктів Date є автокорекція. Можна встановити значення, які виходять за межі діапазону, і вони автоматично скоригуються.

Дата у число, різниця в датах

Коли ви перетворюєте Date на число, він перетворюється на мітку часу, подібно date.getTime() .

Розглянемо наступний приклад:

let msDate = New Date(); console.log(+msDate); // it's a same as date.getTime(), it's number of milliseconds

Також важливо відзначити, що дати можуть бути вираховані. Ви можете використовувати це для вимірювання, як показано нижче:

let startDate = New Date(); // start measuring time for (let x = 0; x < 10000; x++) < let smth = x * x * x; >let endDate = New Date(); // end measuring time console.log(`The loop took $ ms`);

Date.now()

Якщо ви вирішите виміряти час, вам не обов'язково використовувати об'єкт Date. Ви можете використовувати Date.now(), який поверне поточну позначку часу.

let startDate = Date.now(); // milliseconds count from 1 Jan 1970 for (let x = 0; x < 10000; x++) < let doSomething = x * x * x; >let endDate = Date.now(); console.log(`The loop took $ ms`);

Date.parse з рядка

Якщо ви хочете прочитати дату рядка, Date.parse(str) допоможе вам.Формат рядка має бути: MM-DDTHH:mm:ss.sssZ . Також можливі кілька коротких варіантів: YYYY-MM-DD або YYYY-MM або навіть YYYY.

Ось приклад використання Date.parse(str):

let ms = Date.parse('2019-02-28T14:52:20.254-08:00'); console.log(ms); // 1551394340254, it's a timestamp

New Date може бути відразу створена з мітки часу, як це показано тут:

Резюме

JavaScript об'єкт Date використовується для представлення дати та часу. Об'єкт Date включає в себе обидва ці елементи. Загалом місяці вважаються, починаючи з нуля і закінчуючи 11. Дні тижня також вважаються, починаючи з нуля. У JavaScript дати можуть відніматися, і за цими відніманнями йде їхня різниця в мілісекундах, так як при перетворенні на число Date перетворюється на мітку часу. Нарешті, на відміну від інших систем, JavaScript мітки часу вказуються в мілісекундах, а не в секундах.

Час Вікторини: Перевірте свої навички!

отові перевірити свої знання? Пориньте в наші інтерактивні вікторини для більш глибокого розуміння та веселого способу закріпити знання.