Руководство по изучению Dayjs
Игра с датами в JavaScript — сложная задача, поэтому существуют вспомогательные библиотеки, одна из самых известных — moment.js, которая, как мы обсуждали ранее, стала устаревшим проектом.
Одной из предложенных альтернатив является day.js, которая сама по себе является отличной библиотекой для эффективной работы с данными. Пользуюсь им уже больше года и уже хорошо в нем разбираюсь.
Почему вам стоит использовать Day.js?
- Миллионы загрузок
- Активно поддерживается
- Легче работать
- Альтернатива размером 2 КБ
Moment.js+ API-интерфейсы, совместимые сMoment.js - Работает с браузером + Node.js.
- Возвращает новый экземпляр (предотвращает ошибки)
Начало работы с Dayjs
Это очень просто. Вы можете найти руководство для Node.js здесь, а для браузера — здесь. Если вы, как и я, используете TypeScript, это должно помочь вам настроить DayJS.
Я работаю с Node.js в среде JavaScript. Версия DayJS — ^1.11.10. Упоминаю об этом здесь, поскольку в будущем могут быть внесены любые критические изменения.
Если вы следуете этому руководству, сделайте следующее:
Подготовьте среду:
npm initУстановите DayJS точной версии:
npm install dayjs@1.11.10Создайте файл index.js и импортируйте DayJS:
const dayjs = require('dayjs')Это моя минималистичная настройка для подготовки этого руководства:
Основы Dayjs
Обертка объекта Date создается Day.js. Сам объект Day.js неизменяем (т. е. не может быть изменен). Любая операция API, выполненная в нем для манипуляции или любой другой цели, вернет новый экземпляр.
Объект Dayjs() для текущего времени
Давайте немного изучим DayJS:
console.log(dayjs());Это точно так же:
console.log(dayjs(new Date()));Он возвращает текущую дату в следующем формате объекта:
{
'$L': 'en',
'$d': 2023-11-07T09:49:35.970Z,
'$y': 2023,
'$M': 10,
'$D': 7,
'$W': 2,
'$H': 14,
'$m': 49,
'$s': 35,
'$ms': 970,
'$x': {},
'$isDayjsObject': true
}Объект Dayjs для определенного времени
Мы также можем вежливо попросить DayJS вернуть объект на выбранную нами дату... Вот так:
dayjs('12-12-2023');или вот так:
dayjs(new Date(2023, 8, 8))Он возвращает это:
{
'$L': 'en',
'$d': 2023-12-11T19:00:00.000Z,
'$y': 2023,
'$M': 11,
'$D': 12,
'$W': 2,
'$H': 0,
'$m': 0,
'$s': 0,
'$ms': 0,
'$x': {},
'$isDayjsObject': true
}Форматирование данных
Dayjs предоставляет множество возможностей для форматирования даты, которую вы хотите отображать пользователям.
Например, это:
dayjs('2023-12-23').format('DD/MM/YYYY') // '23/12/2023'Всю таблицу для форматирования вы можете найти здесь.
Работа с плагинами
Dayjs предоставляет набор плагинов, которые облегчают ваши задачи.
Чтобы работать с плагинами, вам необходимо сначала импортировать их, а затем расширить с помощью day.js следующим образом:
const dayjs = require("dayjs");
const isToday = require("dayjs/plugin/isToday");
dayjs.extend(isToday);
console.log(dayjs("11-07-2023").isToday()); // trueПлагин выше поможет вам определить, является ли введенная дата сегодняшней или нет.
Классные плагины
Вот некоторые из действительно интересных, которые помогут вам сэкономить часы (при работе с собственными датами):
Следующее поможет вам определить, относится ли указанная дата к вчерашнему, сегодняшнему или завтрашнему дню, вернув логический ответ:
- isToday
- isYesterday
- isTomorrow
Вам следует изучить другие в соответствии с потребностями вашего проекта здесь.
Показать варианты
Вы можете отображать объекты DayJS следующим образом:
Данные JavaScript
console.log(dayjs("2023-12-23").toDate());String
dayjs('2019-01-25').toString() // 'Fri, 25 Jan 2019 02:00:00 GMT'JSON
dayjs('2023-01-12').toJSON() // '2023-01-12T02:00:00.000Z'Array
dayjs.extend(toArray)
dayjs('2023-01-12').toArray() // [ 2023, 0, 12, 0, 0, 0, 0 ]Object
dayjs.extend(toObject)
dayjs('2023-01-23').toObject()
/* { years: 2023,
months: 0,
date: 23,
hours: 0,
minutes: 0,
seconds: 0,
milliseconds: 0 } */Манипуляция
Вы можете делать любые манипуляции. Подобно добавлению или вычитанию времени любого формата с помощью объекта Date.
Добавление времени
Вы можете добавить время следующим образом:
const date1 = dayjs();
const date2 = date1.add(2, "day");
console.log(date2);date1 не изменяется при применении date1.add. Это то, что я имел в виду под неизменностью ранее.
Вычитание времени
Вычитание происходит так:
const date1 = dayjs();
const date2 = date1.subtract(2, "day");
console.log(date2);Поиск начала или конца времени
Dayjs позволяет вам найти начало или конец месяца или года. В основном его используют месяцами.
dayjs().startOf('year')
dayjs().endOf('year')Поиск разницы между двумя датами:
Это то, что каким-то образом используется во многих проектах, поэтому я решил упомянуть и этот сценарий в руководстве.
Вы можете найти разницу между двумя датами следующим образом:
const firstDate = dayjs("2023-06-20");
const secondDate = dayjs("2022-11-11");
console.log(firstDate.diff(secondDate));По умолчанию он дает ответ в миллисекундах:
19094400000Но вы также можете изменить его на день, месяц или год. Например вот так:
firstDate.diff(secondDate, "month") // 7Если вам нужен очень конкретный ответ со значением десятичных точек, сделайте следующее:
firstDate.diff(secondDate, "month", true) // 7.290322580645161Работаем с UTC
В моем проекте мне пришлось работать с UTC из-за проблем с таймзонами. Dayjs предоставляет комплексное решение этой проблемы с помощью плагина.
Из официальных документов здесь вы можете видеть, что это работает так просто:
dayjs.extend(utc)
var a = dayjs()
a.format() //2019-03-06T08:00:00+08:00
a.utc().format() // 2019-03-06T00:00:00ZTimezone
Вы также можете работать с несколькими часовыми поясами с помощью еще одного крутого плагина.
Упоминание примера из официальных документов здесь:
dayjs.extend(utc)
dayjs.extend(timezone)
// current time zone is 'Europe/Berlin' (offset +01:00)
// Parsing
dayjs.tz("2013-11-18 11:55:20", "America/Toronto") // '2013-11-18T11:55:20-05:00'
// Converting (from time zone 'Europe/Berlin'!)
dayjs("2013-11-18 11:55:20").tz("America/Toronto") // '2013-11-18T05:55:20-05:00'Раньше мы сохраняли часовой пояс пользователя в базе данных, а затем использовали строку в методе .tz, чтобы получить часовой пояс пользователя и отобразить его.
Его также можно использовать для угадывания часового пояса пользователя. Так:
dayjs.tz.guess() // America/Chicagoi18n
Если ваш проект предполагает интернационализацию, не волнуйтесь. Dayjs также поможет вам.
Вы можете узнать, как загрузить его в проект Node.js здесь, а для браузера — подробности здесь.
Это дает вам доступ к локали, которую вы можете использовать, например, или глобально. Подробности указаны в документах, упомянутых выше.
Заключение
Этот блог поможет вам решить, стоит ли вам выбирать DayJS для своего следующего проекта или нет. Я постарался включить в свой проект то, что использовал в течение года.
Приятного кодирования! 🎉💻✨
