Для работы с датой и временем есть также библиотека
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
.