Библиотека Day.js упрощает обработку операций с датой и временем в приложениях React.

Управление датой и временем имеет решающее значение для любого приложения, и React не является исключением. Хотя JavaScript предоставляет встроенные функции для работы с датой и временем, они могут быть громоздкими. К счастью, многие сторонние библиотеки могут упростить управление датой и временем в React. Одной из таких библиотек является Day.js.

Day.js — это легкая библиотека для синтаксического анализа, проверки, манипулирования и форматирования даты и времени в JavaScript.

Установка Day.js

Day.js библиотека — современная альтернатива Moment.js — еще одна библиотека, используемая для обработки даты и времени.. Day.js предлагает аналогичный API с меньшими размерами и более высокой производительностью.

Чтобы использовать Day.js в вашем приложении React, вам сначала нужно установить его. Вы можете сделать это, выполнив следующую команду в своем терминале:

npm установить dayjs

Разбор и форматирование даты и времени

instagram viewer

Day.js предоставляет простой API для разбора и форматирования дат. Вы можете получить дату и время, используя деньжс() метод, но сначала вам нужно импортировать его из библиотеки Day.js.

Например:

Импортировать Реагировать от«реагировать»;
Импортировать дайджес от'дайджс';
функцияПриложение() {


константа дата = dayjs();
консоль.лог (дата); 


возвращаться (




Дата и тайм-менеджмент</p>
 </div>
 )
}


экспортпо умолчанию Приложение

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

В вашей консоли объект Day.js будет выглядеть так:

деньжс() метод принимает необязательный аргумент даты, который может быть строкой, числом (отметка времени Unix), объект даты JavaScriptили другой объект Day.js. Метод создаст объект Day.js, представляющий указанный аргумент даты.

Например:

Импортировать Реагировать от«реагировать»;
Импортировать дайджес от'дайджс';
функцияПриложение() {


константа дата = деньjs('2023-05-01');
консоль.лог (дата); // Объект Day.js, представляющий указанную дату


константа unixDate = dayjs(1651382400000);
консоль.log(unixDate); // Объект Day.js, представляющий указанную дату


возвращаться (




Дата и тайм-менеджмент</p>
 </div>
 )
}


экспортпо умолчанию Приложение

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

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

Метод принимает строку формата в качестве аргумента. Строковый аргумент может включать комбинацию букв и специальных символов, каждый из которых имеет определенное значение.

Например:

Импортировать Реагировать от«реагировать»;
Импортировать дайджес от'дайджс';
функцияПриложение() {


константа дата = деньjs('2023-05-01').формат('дддд, ММММ Д, ГГГГ'); // Понедельник, 1 мая 2023 г.
константа время = dayjs (). Формат ('ЧЧ: мм: сс'); //09:50:23
константа unixDate = dayjs(1651382400000).формат('ММ/ДД/ГГ'); // 05/01/22


возвращаться (




{дата}</p>


{unixDate}</p>


{время}</p>
 </div>
 )
}


экспортпо умолчанию Приложение

дата переменная будет отображать дату в формате «Среда, 26 апреля 2023 года». Строка формата ‘дддд, ММММ Д, ГГГГ’ где дддд это день недели, ММММ это месяц словами, Д день месяца в одной или двух цифрах, и ГГГГ это год в четырех цифрах.

unixDate переменная форматируется как строка с использованием строки формата 'ММ/ДД/ГГГГ,' который представляет месяц двумя цифрами, день месяца двумя цифрами и год четырьмя цифрами.

время переменная отображает текущее время в указанном формате. Строка формата ‘ЧЧ: мм: сс’ где ЧЧ представляет часы, мм представляет минуты, а SS представляет секунды.

Управление датами и временем

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

Например:

Импортировать Реагировать от«реагировать»;
Импортировать дайджес от'дайджс';
функцияПриложение() {


константа дата = dayjs (). Добавить (7,'дни').формат('дддд, ММММ Д, ГГГГ'); // Среда, 16 июня 2023 г. 
константа время = dayjs(). вычесть (2, 'часы').формат('ЧЧ: мм: сс'); // 07:53:00


возвращаться (




{дата}</p>


{время}</p>
 </div>
 )
}


экспортпо умолчанию Приложение

В приведенном выше блоке кода используется добавлять() способ добавить 7 дней к текущей дате. добавлять() Метод позволяет добавить указанное количество времени к объекту Day.js. Метод принимает два аргумента: количество времени для сложения в числах и единицу времени для сложения.

С вычесть() метод, вы можете вычесть указанное количество времени из Day.js объект. время переменная вычитает 2 часа из текущего времени, используя вычесть() метод.

Отображение относительного времени

Day.js предоставляет несколько методов, включая отныне(), к данному моменту(), к(), и от() для отображения относительного времени, например «2 часа назад» или «через 3 дня». Чтобы использовать эти методы, импортируйте относительное время плагин от dayjs/плагин/относительное время в вашем приложении React.

Например:

Импортировать Реагировать от«реагировать»;
Импортировать дайджес от'дайджс';
Импортировать относительное время от'dayjs/плагин/относительное время';
функцияПриложение() {


 dayjs.extend (относительное время);

константа дата = dayjs (). Добавить (7, 'дни')
константа относительнаяДата = date.fromNow(); // через 7 дней


константа date2 = dayjs (). Вычесть (2, 'часы');
константа относительнаяДата2 = date2.toNow(); // через 2 часа


константа lastYear = dayjs(). вычесть (1, 'год');
константа diff = date.from (последний год); // в году
константа diff2 = date.to (последний год) // год назад


возвращаться (




{ относительная дата }</p>


{ относительнаяДата2 }</p>


{ разница }</p>


{ разница2 }</p>
 </div>
 )
}


экспортпо умолчанию Приложение

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

к данному моменту() функция похожа на отныне() тем, что отображает строку, представляющую разницу между указанной датой и текущим временем. Когда вы звоните к данному моменту() функция, она возвращает строку относительного времени к текущему времени.

Наконец, с помощью от() и к() функции, вы можете отобразить строку относительного времени, представляющую разницу между двумя указанными датами. В этом примере вы видите разницу между в прошлом году и дата используя от() и к() функции.

Обратите внимание, что вы также можете передать необязательный логический аргумент в отныне(), к данному моменту(), от(), и к() методы, чтобы указать, следует ли включать или исключать суффикс (например, «назад» или «в»).

Например:

константа дата = dayjs (). Добавить (7, 'дни')
константа относительнаяДата = дата.отсейчас(истинный); // 7 дней
константа date2 = dayjs (). Вычесть (2, 'часы');
константа относительнаяДата2 = date2.toNow(истинный); // 2 часа
константа lastYear = dayjs(). вычесть (1, 'год');
константа diff = date.from (последний год, истинный) // год
константа diff2 = date.to (последний год, истинный) // год

Прохождение ЛОЖЬ к аргументу отобразит даты с суффиксом.

Эффективное управление датой и временем

Управление датой и временем — важнейший аспект любого приложения, и Day.js предоставляет простую в использовании и гибкую библиотеку для обработки этих операций в приложении React. Включив Day.js в свой проект, вы можете легко форматировать дату и время, анализировать строки и управлять длительностью.

Кроме того, Day.js предлагает ряд плагинов, расширяющих его функциональность и делающих его еще более мощным. Независимо от того, создаете ли вы простой календарь или сложную систему планирования, Day.js — отличный выбор для управления датой и временем в вашем приложении React.