ספריית Day.js מאפשרת לטפל בצורה חלקה בפעולות תאריך ושעה ביישומי React.

ניהול תאריך ושעה הוא חיוני לכל יישום, וראקט אינו יוצא דופן. בעוד ש-JavaScript מספק פונקציות מובנות של מניפולציה של תאריך ושעה, הן עלולות להיות מסורבלות. למרבה המזל, ספריות רבות של צד שלישי יכולות לפשט את ניהול התאריך והזמן ב-React. ספרייה אחת כזו היא Day.js.

Day.js היא ספרייה קלה לניתוח, אימות, מניפולציה ועיצוב תאריכים ושעות ב-JavaScript.

התקנת Day.js

ה Day.js הספרייה היא אלטרנטיבה מודרנית ל Moment.js, שהיא עוד ספרייה המשמשת לטיפול בתאריכים ושעות. Day.js מציע API דומה עם טביעת רגל קטנה יותר וביצועים מהירים יותר.

כדי להשתמש ב-Day.js באפליקציית React שלך, תחילה עליך להתקין אותו. אתה יכול לעשות זאת על ידי הפעלת הפקודה הבאה בטרמינל שלך:

npm להתקין dayjs

ניתוח ועיצוב תאריכים ושעות

Day.js מספק ממשק API פשוט לניתוח ועיצוב תאריכים. אתה יכול לקבל את התאריך והשעה באמצעות dayjs() השיטה, אך ראשית, עליך לייבא אותה מספריית Day.js.

לדוגמה:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא dayjs מ'dayjs';
פוּנקצִיָהאפליקציה() {


const תאריך = dayjs();
לְנַחֵם.log (תאריך); 


לַחֲזוֹר (




תַאֲרִיך וניהול זמן</p>
 </div>
 )
}


יְצוּאבְּרִירַת מֶחדָל אפליקציה
instagram viewer

ה dayjs() השיטה יוצרת אובייקט Day.js חדש המייצג תאריך ושעה ספציפיים. בדוגמה למעלה, ה dayjs() השיטה יוצרת אובייקט Day.js המייצג את התאריך והשעה הנוכחיים.

במסוף שלך, האובייקט Day.js ייראה כך:

ה dayjs() השיטה מקבלת ארגומנט תאריך אופציונלי שיכול להיות מחרוזת, מספר (חותמת זמן של יוניקס), אובייקט JavaScript Date, או אובייקט Day.js אחר. השיטה תיצור אובייקט Day.js המייצג את ארגומנט התאריך שצוין.

לדוגמה:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא dayjs מ'dayjs';
פוּנקצִיָהאפליקציה() {


const תאריך = dayjs('2023-05-01');
לְנַחֵם.log (תאריך); // אובייקט Day.js המייצג את התאריך שצוין


const unixDate = dayjs(1651382400000);
לְנַחֵם.log (unixDate); // אובייקט Day.js המייצג את התאריך שצוין


לַחֲזוֹר (




תַאֲרִיך וניהול זמן</p>
 </div>
 )
}


יְצוּאבְּרִירַת מֶחדָל אפליקציה

הפלט של אובייקט Day.js של בלוק קוד זה יהיה דומה לבלוק הקוד הקודם אך יהיו בעלי ערכי מאפיינים שונים.

כדי להציג את התאריכים שנוצרו כאובייקטים של Day.js, עליך להשתמש ב- פוּרמָט() שיטה. ה פוּרמָט() השיטה של ​​ספריית Day.js מאפשרת לך לעצב אובייקט Day.js כמחרוזת לפי מחרוזת פורמט ספציפית.

השיטה לוקחת מחרוזת פורמט כארגומנט שלה. ארגומנט המחרוזת יכול לכלול שילוב של אותיות ותווים מיוחדים, לכל אחד מהם משמעות מסוימת,

לדוגמה:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא dayjs מ'dayjs';
פוּנקצִיָהאפליקציה() {


const תאריך = dayjs('2023-05-01').פוּרמָט('dddd, MMMM D, YYYY'); // יום שני, 1 במאי, 2023
const time = dayjs().format('HH: mm: ss'); //09:50:23
const unixDate = dayjs(1651382400000).פוּרמָט('MM/DD/YY'); // 05/01/22


לַחֲזוֹר (




{date}</p>


{unixDate}</p>


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


יְצוּאבְּרִירַת מֶחדָל אפליקציה

ה תַאֲרִיך המשתנה יציג את התאריך בפורמט זה 'יום רביעי, 26 באפריל, 2023'. מחרוזת הפורמט היא 'dddd, MMMM D, YYYY' איפה dddd הוא היום בשבוע, ממממ הוא החודש במילים, ד הוא היום בחודש בספרה אחת או שתיים, ו YYYY היא השנה בארבע ספרות.

ה unixDate המשתנה מעוצב כמחרוזת באמצעות מחרוזת הפורמט 'MM/DD/YYYY,' המייצג את החודש בשתי ספרות, את היום בחודש בשתי ספרות, ואת השנה בארבע ספרות.

ה זְמַן משתנה מציג את השעה הנוכחית בפורמט שצוין. מחרוזת הפורמט היא 'HH: mm: ss' איפה ה HH מייצג את השעות, את מ"מ מייצג את הפרוטוקולים, ואת ss מייצג את השניות.

מניפולציה של תאריכים ושעות

Day.js מספק שיטות מרובות המאפשרות לתפעל בקלות תאריכים ושעות. אתה יכול להתייחס ל Day.js תיעוד רשמי כדי לקבל את הרשימה המלאה של השיטות הזמינות למניפולציה של תאריכים ושעות.

לדוגמה:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא dayjs מ'dayjs';
פוּנקצִיָהאפליקציה() {


const תאריך = dayjs().add(7,'ימים').פוּרמָט('dddd, MMMM D, YYYY'); // יום רביעי, 16 ביוני, 2023 
const time = dayjs().subtract(2, 'שעה (ות').פוּרמָט('HH: mm: ss'); // 07:53:00


לַחֲזוֹר (




{date}</p>


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


יְצוּאבְּרִירַת מֶחדָל אפליקציה

בלוק הקוד שלמעלה משתמש ב- לְהוֹסִיף() שיטה להוסיף 7 ימים לתאריך הנוכחי. ה לְהוֹסִיף() השיטה מאפשרת לך להוסיף פרק זמן מוגדר לאובייקט Day.js. השיטה דורשת שני ארגומנטים, משך הזמן להוסיף במספרים ויחידת הזמן להוסיף.

עם ה להחסיר() בשיטה, אתה יכול להחסיר פרק זמן מוגדר מה- Day.js לְהִתְנַגֵד. ה זְמַן המשתנה מפחית שעתיים מהזמן הנוכחי באמצעות ה- להחסיר() שיטה.

הצגת זמן יחסי

Day.js מספק מספר שיטות כולל מעכשיו(), toNow(), ל(), ו מ() כדי להציג זמן יחסי, כגון "לפני שעתיים" או "בעוד 3 ימים". כדי להשתמש בשיטות אלה, ייבא את ה זמן יחסי תוסף מ dayjs/plugin/relativeTime באפליקציית React שלך.

לדוגמה:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא dayjs מ'dayjs';
יְבוּא זמן יחסי מ'dayjs/plugin/relativeTime';
פוּנקצִיָהאפליקציה() {


 dayjs.extend (relativeTime);

const תאריך = dayjs().add(7, 'ימים')
const relativeDate = date.fromNow(); // בעוד 7 ימים


const date2 = dayjs().subtract(2, 'שעה (ות');
const relativeDate2 = date2.toNow(); // תוך שעתיים


const lastYear = dayjs().subtract(1, 'שָׁנָה');
const diff = date.from (lastYear); // בעוד שנה
const diff2 = date.to (lastYear) // לפני שנה


לַחֲזוֹר (




{ relativeDate }</p>


{ relativeDate2 }</p>


{ הבדל }</p>


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


יְצוּאבְּרִירַת מֶחדָל אפליקציה

ה מעכשיו() הפונקציה מציגה מחרוזת זמן יחסית המייצגת את ההבדל בין השעה הנוכחית לתאריך שצוין. בדוגמה זו, ה מעכשיו() מציג את ההבדל בין תַאֲרִיך והשעה הנוכחית.

ה toNow() הפונקציה דומה ל- מעכשיו() פונקציה בכך שהיא מציגה מחרוזת המייצגת את ההבדל בין תאריך שצוין לשעה הנוכחית. כשאתה מתקשר ל toNow() פונקציה, היא מחזירה מחרוזת זמן יחסית לזמן הנוכחי.

לבסוף, באמצעות מ() ו ל() פונקציות, אתה יכול להציג מחרוזת זמן יחסית המייצגת את ההבדל בין שני תאריכים שצוינו. בדוגמה זו, אתה מקבל את ההבדל בין שנה שעברה ו תַאֲרִיך משתמש ב מ() ו ל() פונקציות.

שים לב, אתה יכול גם להעביר ארגומנט בוליאני אופציונלי ל- מעכשיו(), toNow(), מ(), ו ל() שיטות כדי לציין אם לכלול או לא לכלול את הסיומת (למשל "לפני" או "ב").

לדוגמה:

const תאריך = dayjs().add(7, 'ימים')
const relativeDate = date.fromNow(נָכוֹן); // 7 ימים
const date2 = dayjs().subtract(2, 'שעה (ות');
const relativeDate2 = date2.toNow(נָכוֹן); // שעתיים
const lastYear = dayjs().subtract(1, 'שָׁנָה');
const diff = date.from (lastYear, נָכוֹן) // שנה
const diff2 = date.to (lastYear, נָכוֹן) // שנה

חוֹלֵף שֶׁקֶר לארגומנט יציג את התאריכים עם הסיומת.

ניהול תאריך ושעה בצורה יעילה

ניהול תאריך ושעה הוא היבט מכריע בכל יישום, ו-Day.js מספק ספרייה קלה לשימוש וגמישה לטיפול בפעולות אלו באפליקציית React. על ידי שילוב Day.js בפרויקט שלך, תוכל לעצב בקלות תאריכים ושעות, לנתח מחרוזות ולתפעל משכי זמן.

בנוסף, Day.js מציע מגוון תוספים כדי להרחיב את הפונקציונליות שלו ולהפוך אותו לעוצמתי עוד יותר. בין אם אתה בונה לוח שנה פשוט או מערכת תזמון מורכבת, Day.js היא בחירה מצוינת לניהול תאריך ושעה באפליקציית React שלך.