Робота з датами – справа не з легких. Але пакет date-fns полегшує роботу з датами в JavaScript.
Давайте детально зануримося в пакет date-fns, щоб спростити наше життя, ніж раніше. Пакет date-fns легкий.
Встановлення пакета
Нам потрібно налаштувати проект за допомогою npm для роботи зі стороннім пакетом. Давайте швидко розглянемо кроки для завершення налаштування.
Я припускаю, що у вас встановлено NodeJS або IDE, щоб практикувати це.
- Перейдіть до потрібного каталогу, у якому ви хочете працювати.
- Виконайте команду npm init, щоб ініціалізувати проект.
- Дайте відповіді на всі запитання відповідно до ваших уподобань.
- Тепер встановіть date-fns за допомогою наведеної нижче команди
npm install date-fns
- Створіть файл під назвою dateFunctions.js
Тепер ми готові перейти до пакета date-fns. Давайте вивчимо деякі основні методи з пакету.
isValid
Усі дати недійсні.
Наприклад, немає такої дати, як 2021-02-30. Як ми можемо перевірити, дійсна дата чи ні?
Метод isValid з пакета date-fns допоможе нам визначити, чи є вказана дата дійсною чи ні.
Перевірте, чи правильно працює наступний код із дійсністю дат.
const { isValid } = require("date-fns");
console.log(isValid(new Date("2021, 02, 30")));
Якщо ви виконаєте наведений вище код, ви побачите, що 30 лютого 2021 року є дійсним. О! Це не.
Чому це відбувається?
JavaScript перетворює додатковий день лютого на 1 березня 2021 року, яке є дійсною датою. Щоб підтвердити це, надрукуйте нову дату («2021, 02, 30») на консолі.
console.log(new Date("2021, 02, 30"));
Пакет date-fns надає метод під назвою parse для вирішення цієї проблеми. Метод parse аналізує вказану вами дату та повертає точні результати.
Подивіться на наведений нижче код.
const { isValid, parse } = require("date-fns");
const invalidDate = parse("30.02.2021", "dd.MM.yyyy", new Date());
const validDate = parse("25.03.2021", "dd.MM.yyyy", new Date());
console.log(isValid(invalidDate));
console.log(isValid(validDate));
формат
Одним із основних способів використання під час роботи з датами є форматування їх за бажанням. Ми форматуємо дати в різних форматах за допомогою методу format з пакета date-fns.
Відформатуйте дату як 23-01-1993, 1993-01-23 10:43:55, вівторок, 23 січня 1993 року тощо. Запустіть наступний код, щоб отримати відповідну дату у згаданих форматах.
const { format } = require("date-fns");
console.log(format(new Date(), "dd-MM-yyyy"));
console.log(format(new Date(), "dd/MM/yyyy HH:mm:ss"));
console.log(format(new Date(), "PPPP"));
Ви можете знайти повний список форматів тут.
addDays
Метод addDays використовується для встановлення кінцевого терміну через певну кількість днів.
Просто ми можемо додати дні до будь-якої дати, щоб отримати дату дня через кілька днів. Він має багато застосувань.
Скажімо, у вас день народження через X днів, і ви зайняті в ці дні. Ви можете не згадати день народження у своєму щільному графіку. Ви можете просто скористатися методом addDays, щоб повідомити вас про день народження через X днів. Майте код.
const { format, addDays } = require("date-fns");
const today = new Date();
// birthday after 6 days
const birthday = addDays(today, 6);
console.log(format(today, "PPPP"));
console.log(format(birthday, "PPPP"));
Подібно до методу addDays існують інші методи, такі як addHours, subHours, addMinutes, subMinutes, addSeconds, subSeconds, subDays, addWeeks, subWeeks, addYears, subYears тощо. Ви можете легко здогадатися про функціональність методів за їхніми назвами.
Спробуйте їх.
formatDistance
Написання коду для порівняння дат з нуля – кошмар. Чому ми взагалі порівнюємо дати?
Є багато програм, де ви бачили порівняння дат. Якщо ви візьмете веб-сайти соціальних мереж, там буде слоган із згадуванням 1 хвилини тому, 12 годин тому, 1 дня тому тощо. Тут ми використовуємо порівняння дати від дати й часу публікації до поточної дати й часу.
Метод formatDistance робить те саме. Він повертає проміжок між двома заданими датами.
Давайте напишемо програму для визначення вашого віку.
const { formatDistance } = require("date-fns");
const birthday = new Date("1956, 01, 28");
const presentDay = new Date();
console.log(`Age: ${formatDistance(presentDay, birthday)}`);
кожнийДеньІнтервалу
Припустимо, вам потрібно знайти імена та дати приблизно на наступні X днів. Метод eachDayOfInterval допомагає нам знайти дні між початковою та кінцевою датою.
Давайте дізнаємося наступні 30 днів від сьогодні.
const { addDays, eachDayOfInterval, format } = require("date-fns");
const presentDay = new Date();
const after30Days = addDays(presentDay, 30);
const _30Days = eachDayOfInterval({ start: presentDay, end: after30Days });
_30Days.forEach((day) => {
console.log(format(day, "PPPP"));
});
макс. і мін
Методи max і min знаходять максимальну та мінімальну дати серед заданих дат відповідно. Методи в date-fns дуже знайомі, і легко здогадатися про функціональність цих методів. Давайте напишемо код.
const { min, max } = require("date-fns");
const _1 = new Date("1990, 04, 22");
const _2 = new Date("1990, 04, 23");
const _3 = new Date("1990, 04, 24");
const _4 = new Date("1990, 04, 25");
console.log(`Max: ${max([_1, _2, _3, _4])}`);
console.log(`Min: ${min([_1, _2, _3, _4])}`);
isEqual
Ви можете легко здогадатися про функціональність методу isEqual. Як ви думаєте, метод isEqual використовується для перевірки рівності двох дат. Перегляньте приклад коду нижче.
const { isEqual } = require("date-fns");
const _1 = new Date();
const _2 = new Date();
const _3 = new Date("1900, 03, 22");
console.log(isEqual(_1, _2));
console.log(isEqual(_2, _3));
console.log(isEqual(_3, _1));
Висновок
Якщо говорити про кожен метод у пакеті date-fns, то для його виконання потрібні дні. Найкращий спосіб вивчити будь-який пакет — це ознайомитися з основними методами з нього, а потім прочитати документацію для отримання додаткової інформації. Застосуйте той самий сценарій і для пакета date-fns.
Ви навчилися основних методів у цьому посібнику. Пошук конкретного використання в документація або подумайте про відвідування онлайн-курсів, наприклад JavaScript, jQuery та JSON.
Щасливого кодування 👨💻