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

Управлението на датата и часа е от решаващо значение за всяко приложение и React не прави изключение. Докато JavaScript предоставя вградени функции за манипулиране на дата и час, те могат да бъдат тромави. За щастие много библиотеки на трети страни могат да опростят управлението на датата и часа в React. Една такава библиотека е Day.js.

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

Инсталиране на Day.js

The Day.js библиотеката е модерна алтернатива на Moment.js, която е друга библиотека, използвана за обработка на дати и часове. Day.js предлага подобен API с по-малък отпечатък и по-бърза производителност.

За да използвате Day.js във вашето приложение React, първо трябва да го инсталирате. Можете да направите това, като изпълните следната команда във вашия терминал:

npm инсталирайте dayjs

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

Day.js предоставя

instagram viewer
прост API за анализиране и форматиране на дати. Можете да получите датата и часа, като използвате dayjs() метод, но първо трябва да го импортирате от библиотеката Day.js.

Например:

импортиране Реагирайте от"реагира";
импортиране dayjs от'dayjs';
функцияПриложение() {


конст дата = dayjs();
конзола.log (дата); 


връщане (




Дата и управление на времето</p>
 </div>
 )
}


износпо подразбиране Приложение

The dayjs() създава нов обект Day.js, представляващ конкретна дата и час. В примера по-горе, dayjs() метод създава Day.js обект, представящ текущата дата и час.

Във вашата конзола обектът Day.js ще изглежда така:

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

Например:

импортиране Реагирайте от"реагира";
импортиране dayjs от'dayjs';
функцияПриложение() {


конст дата = dayjs('2023-05-01');
конзола.log (дата); // Day.js обект, представляващ посочената дата


конст unixDate = dayjs(1651382400000);
конзола.log (unixDate); // Day.js обект, представляващ посочената дата


връщане (




Дата и управление на времето</p>
 </div>
 )
}


износпо подразбиране Приложение

Изходът на обекта Day.js от този кодов блок ще бъде подобен на предишния кодов блок, но ще има различни стойности на свойствата.

За да покажете датите, генерирани като Day.js обекти, трябва да използвате формат () метод. The формат () методът на библиотеката Day.js ви позволява да форматирате Day.js обект като низ според конкретен форматиращ низ.

Методът приема форматиращ низ като аргумент. Низовият аргумент може да включва комбинация от букви и специални символи, всеки със специфично значение,

Например:

импортиране Реагирайте от"реагира";
импортиране dayjs от'dayjs';
функцияПриложение() {


конст дата = dayjs('2023-05-01').format(„дддд, ММММ Д, ГГГГ“); // понеделник, 1 май 2023 г
конст време = dayjs().format(„ЧЧ: мм: сс“); //09:50:23
конст unixDate = dayjs(1651382400000).format(„ДД/ММ/ГГ“); // 05/01/22


връщане (




{дата}</p>


{unixDate}</p>


{time}</p>
 </div>
 )
}


износпо подразбиране Приложение

The дата променливата ще покаже датата в този формат „сряда, 26 април 2023 г.“. Форматиращият низ е „дддд, ММММ Д, ГГГГ“ където дддд е денят от седмицата, ММММ е месецът с думи, д е денят от месеца с една или две цифри и ГГГГ е годината с четири цифри.

The unixDate променливата се форматира като низ с помощта на форматиращия низ „ДД/ММ/ГГГГ“ което представлява месеца с две цифри, деня от месеца с две цифри и годината с четири цифри.

The време променлива показва текущото време в зададения формат. Форматиращият низ е „ЧЧ: мм: сс“ където HH представлява часовете, мм представлява минутите, а ss представлява секундите.

Манипулиране на дати и часове

Day.js предоставя множество методи, които улесняват манипулирането на дати и часове. Можете да се обърнете към Day.js официална документация, за да получите пълния списък с налични методи за манипулиране на дати и часове.

Например:

импортиране Реагирайте от"реагира";
импортиране dayjs от'dayjs';
функцияПриложение() {


конст дата = dayjs().add(7,"дни").format(„дддд, ММММ Д, ГГГГ“); // сряда, 16 юни 2023 г 
конст време = dayjs().изваждане(2, 'часа').format(„ЧЧ: мм: сс“); // 07:53:00


връщане (




{дата}</p>


{time}</p>
 </div>
 )
}


износпо подразбиране Приложение

Кодовият блок по-горе използва добави () метод за добавяне на 7 дни към текущата дата. The добави () метод ви позволява да добавите определено време към обект Day.js. Методът приема два аргумента, количеството време за добавяне в числа и единицата време за добавяне.

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

Показване на относително време

Day.js предоставя няколко метода, включително от сега(), до сега(), да се(), и от() за показване на относително време, като например „преди 2 часа“ или „след 3 дни“. За да използвате тези методи, импортирайте относително време плъгин от dayjs/плъгин/relativeTime във вашето приложение React.

Например:

импортиране Реагирайте от"реагира";
импортиране dayjs от'dayjs';
импортиране относително време от'dayjs/plugin/relativeTime';
функцияПриложение() {


 dayjs.extend (relativeTime);

конст дата = dayjs().add(7, "дни")
конст относителна дата = date.fromNow(); // след 7 дни


конст date2 = dayjs().subtract(2, 'часа');
конст относителна дата2 = дата2.toNow(); // след 2 часа


конст lastYear = dayjs().subtract(1, "година");
конст diff = date.from (последната година); // след година
конст diff2 = date.to (lastYear) // преди година


връщане (




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


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


{ diff }</p>


{ diff2 }</p>
 </div>
 )
}


износпо подразбиране Приложение

The от сега() функцията показва относителен времеви низ, представляващ разликата между текущия час и определена дата. В този пример, от сега() показва разликата между дата и текущото време.

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

И накрая, с помощта на от() и да се() функции, можете да покажете относителен времеви низ, представляващ разликата между две посочени дати. В този пример получавате разликата между миналата година и дата използвайки от() и да се() функции.

Имайте предвид, че можете също да подадете незадължителен булев аргумент към от сега(), до сега(), от(), и да се() методи, за да укажете дали да включите или изключите суфикса (напр. „преди“ или „в“).

Например:

конст дата = dayjs().add(7, "дни")
конст относителна дата = date.fromNow(вярно); // 7 дни
конст date2 = dayjs().subtract(2, 'часа');
конст относителна дата2 = дата2.досега(вярно); // 2 часа
конст lastYear = dayjs().subtract(1, "година");
конст diff = date.from (последната година, вярно) // годишно
конст diff2 = date.to (последната година, вярно) // годишно

Преминаване невярно към аргумента ще покаже датите със суфикса.

Ефективно управление на датата и часа

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

Освен това Day.js предлага набор от плъгини, за да разшири своята функционалност и да я направи още по-мощен. Независимо дали изграждате прост календар или сложна система за планиране, Day.js е отличен избор за управление на дата и час във вашето приложение React.