Робота з датами Використання date-fns у JavaScript

Автор

Працювати з датами буває непросто. Але існує чудова бібліотека date-fns, яка значно спрощує цю задачу в JavaScript.

Розглянемо детальніше, як date-fns може полегшити наше життя. Ця бібліотека є досить легкою та зручною у використанні.

Встановлення бібліотеки

Для початку нам потрібно налаштувати проєкт за допомогою npm, щоб використовувати сторонні бібліотеки. Давайте швидко пройдемося по кроках налаштування.

Припустимо, що у вас вже встановлено NodeJS або інтегроване середовище розробки (IDE).

  • Перейдіть до папки, де ви хочете створити проєкт.
  • Виконайте команду npm init для ініціалізації нового проєкту.
  • Дайте відповіді на запитання відповідно до ваших потреб.
  • Тепер встановіть date-fns, скориставшись командою:
npm install date-fns
  • Створіть файл з назвою dateFunctions.js.

Готово! Тепер ми можемо перейти до використання date-fns. Розглянемо декілька основних методів цієї бібліотеки.

isValid

Не всі дати є коректними. Наприклад, не існує 30 лютого 2021 року. Як перевірити, чи є дата дійсною?

Метод 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 для вирішення цієї проблеми. Він аналізує вказану дату і повертає точні результати.

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

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

const { format, addDays } = require("date-fns");

const today = new Date();

// день народження через 6 днів
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(`Вік: ${formatDistance(presentDay, birthday)}`);

eachDayOfInterval

Припустимо, вам потрібно отримати список дат протягом певного періоду часу. Метод 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

Методи max та min знаходять найбільшу та найменшу дату серед заданих дат відповідно. Функціональність цих методів є інтуїтивно зрозумілою. Ось приклад коду:

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([_1, _2, _3, _4])}`);
console.log(`Мінімальна: ${min([_1, _2, _3, _4])}`);

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.

Бажаю успіхів у кодуванні! 👨‍💻