09.11.2023 в 20:16

Руководство по изучению 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:00Z

Timezone

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

Упоминание примера из официальных документов здесь:

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/Chicago

i18n

Если ваш проект предполагает интернационализацию, не волнуйтесь. Dayjs также поможет вам.

Вы можете узнать, как загрузить его в проект Node.js здесь, а для браузера — подробности здесь.

Это дает вам доступ к локали, которую вы можете использовать, например, или глобально. Подробности указаны в документах, упомянутых выше.

Заключение

Этот блог поможет вам решить, стоит ли вам выбирать DayJS для своего следующего проекта или нет. Я постарался включить в свой проект то, что использовал в течение года.

Приятного кодирования! 🎉💻✨

Источник:

Selected Sort Option

#JavaScript #NodeJS #React

Войти на сайт