Работа с датой и временем в JavaScript с помощью Day.js

Для работы с датой и временем есть также библиотека Moment.js, но развитие данного решения последнее время заметно замедлилось и пришло время искать более активно поддерживаемую альтернативу, такой стала библиотека Day.js, весит 2кб, которая предоставляет в основном Moment.js-совместимый API для простоты перехода.

В данной статье разберемся, как делать парсинг, валидацию, манипулировании и отображение даты и времени в JavaScript с помощью Day.js.

Начало работы с Day.js

Чтобы начать работать с Day.js в вашем проекте, просто добавьте зависимость через npm или yarn:

npm i dayjs
# или
yarn add dayjs

Теперь просто включите его в свой скрипт:

import * as dayjs from 'dayjs';

Day.js также работает в современных браузерах и её можно подключить через cdnjs либо клонировав минифицированную библиотку к себе в проект из github репозитория Day.js.

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.8.17/dayjs.min.js"></script>
<!-- или -->
<script src="js/dayjs.min.js"></script>

Парсинг даты и времени

Разбор строки даты и времени в объекте Day.js прост и поддерживает строки, числа, родные объекты JavaScript Date, а также другие объекты Day.js:

let date = dayjs('2019-12-27');
date = dayjs('20191227');
date = dayjs(new Date(2019, 11, 27));
date = dayjs(day('2019-12-27'));

Вы даже можете полностью опустить строку, чтобы объект Day.js по умолчанию был привязан к текущей дате и времени:

date = dayjs();

Проверка(валидация) даты и времени

После того как Вы разобрали дату и время с помощью Day.js, Вы можете использовать метод isValid(), чтобы определить, действительно ли то, что Вы передали, было чем-то, что Day.js может разобрать:

dayjs('2019-12-27').isValid();  // true
dayjs('tomorrow').isValid();    // false

Кроме того, если вы попытаетесь отобразить объект Day.js, который был передан с датой, которая не может быть обработана, возврат будет недействительной датой(Invalid Date).

Отображение даты и времени

Метод .format() позволяет нам взять объект Day.js и преобразовать его в строку, читаемую человеком. Он поддерживает общий набор переменных даты и времени, таких как YYYY для полного года, а также MM и mm для месяца и минут соответственно.

Для тех случаев, когда вы хотите включить дополнительный текст, который вы не хотите преобразовывать в часть даты или времени, вы можете "обернуть" строку с помощью скобок [ и ]:

dayjs().format('YYYY-MM-DD [at] HH:mm:ss');
dayjs().format('HH:mm:ss [on] YYYY-MM-DD');

Манипуляция с датой и временем

В предыдущем пункте мы пытались передать в строке tomorrow, и она считалась недействительной датой. Чтобы получить дату и время завтрашнего дня, мы можем начать с сегодняшней даты и времени и добавить к ней день:

dayjs().add(1, 'day').format('YYYY-MM-DD');

В дополнение к добавлению дня, вы также можете добавить месяц и год и даже временные интервалы, такие как час и минута:

dayjs().add(1, 'hour').format('YYYY-MM-DD HH:mm:ss');
dayjs().add(30, 'minute').format('YYYY-MM-DD HH:mm:ss');
dayjs().add(3, 'month').format('YYYY-MM-DD HH:mm:ss');
dayjs().add(3, 'year').format('YYYY-MM-DD HH:mm:ss');

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

dayjs().add(1, 'hour').add(30, 'minute').format('YYYY-MM-DD HH:mm:ss');

Есть еще и метод вычитания:

dayjs().subtract(4, 'hour').format('YYYY-MM-DD HH:mm:ss');

Сравнение дат и времени

Одной из наиболее сложных задач, которая довольно регулярно появляется в разработке, является сравнение дат и времени. Day.js позволяет легко предоставлять вспомогательные методы, такие как isBefore() и isAfter():

const date1 = dayjs('2020-01-1');
const date2 = dayjs();

if (date1.isBefore(date2)) {
  console.log('date1 выпадает до date2');
}
else if (date1.isAfter(date2)) {
  console.log('date2 выпадает до date1');
}
else if (date1.isSame(date2)) {
  console.log('date1 и date2 совпадают');
}

Добавление поддержки нужного языка

Day.js отлично поддерживает интернационализацию.

Но ни один из них не будет включен в вашу сборку, если вы его не используете.

import * as dayjs from 'dayjs';
import 'dayjs/locale/ru'; // загружаем нужный язык

dayjs.locale('ru') // подключаем язык глобально
// или
dayjs('2018-05-05').locale('ru').format() // подключаем язык для конкретного случая

Заключение

Благодаря знакомому интерфейсу и активному обновлениям, Day.js кажется отличной альтернативой для Moment.js.