Moment.js היא ספרייה פנטסטית לטיפול יעיל בניהול תאריכים וזמן בתוך יישומי React.

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

Moment.js היא ספרייה קלת משקל עם דרך פשוטה לתמרן ולעצב תאריכים ושעות ב-JavaScript.

התקנת ספריית Moment.js

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

רגע ההתקנה של npm

לאחר השלמת ההתקנה, תוכל להשתמש ב-Moment.js ברכיב React שלך.

שימוש ב-Moment.js להצגת תאריך ושעה

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

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


const תאריך = רגע().format("MMMM DD YYYY");
const זמן = רגע().format("HH mm ss");


לַחֲזוֹר (




 היוםהתאריך של { תאריך } 


 השעה היא { זמן } </p>
 </div>
 )
}


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

ה רֶגַע() השיטה יוצרת אובייקט רגע חדש המייצג נקודת זמן מסוימת. ה פוּרמָט() השיטה מעצבת אובייקט רגע לייצוג מחרוזת.

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

חלק מהדמויות המיוחדות הללו הן:

  • YYYY: שנה עם ארבע ספרות
  • YY: שנה עם שתי ספרות
  • מ.מ: חודש עם שתי ספרות
  • M: חודש עם ספרה אחת או שתיים
  • ממממ: חודש במילים
  • DD: יום בחודש עם שתי ספרות
  • ד: יום בחודש עם ספרה אחת או שתיים
  • לַעֲשׂוֹת: יום בחודש עם הסידור
  • HH: שעה עם שתי ספרות
  • ח: שעה עם ספרה אחת או שתיים
  • מ"מ: דקה עם שתי ספרות
  • M: דקה עם ספרה אחת או שתיים
  • ss: שני עם שתי ספרות
  • ס: שני עם ספרה אחת או שתיים

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

ה רֶגַע() השיטה יכולה לקחת ארגומנט תאריך או שעה של מחרוזת. כאשר רֶגַע() לשיטה יש ארגומנט תאריך או שעה של מחרוזת, היא יוצרת אובייקט רגע המייצג את התאריך או השעה. המחרוזת יכולה להיות בפורמטים שונים, כגון ISO 8601, RFC 2822 או חותמת זמן Unix.

לדוגמה:

const תאריך = רגע('1998-06-23').פוּרמָט("MMMM DD YYYY");

שימוש ב-Moment.js כדי לתפעל תאריך ושעה

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

לדוגמה:

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


const מחר = רגע().add(1, 'יְוֹם').פוּרמָט("עשה MMMM, YYYY");
const זמן = רגע(). subtract(1, 'שָׁעָה').פוּרמָט("HH: mm: ss");
const lastYear = moment().set('שָׁנָה', 2022).מַעֲרֶכֶת('חוֹדֶשׁ', 1).פוּרמָט("עשה MMMM, YYYY");
const שעה = רגע().get('שָׁעָה');


לַחֲזוֹר (


"אפליקציה">
מָחָרהתאריך של {מחר}


זה היה הזמן: { time }, לפני שעה</p>


{ בשנה שעברה }</p>


{ שעה }</p>
 </div>
 )
}


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

בדוגמה זו, אתה להצהיר על משתני JavaScript הבאים: מָחָר, זְמַן, שנה שעברה, ו שָׁעָה. ארבעת המשתנים הללו משתמשים בשיטות שונות של ספריית Moment.js כדי לתפעל תאריך ושעה.

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

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

משתמש ב מַעֲרֶכֶת() שיטה, ה שנה שעברה משתנה קובע את השנה ל-2022 ואת החודש לפברואר (שכן ינואר מיוצג כחודש 0). ה מַעֲרֶכֶת() השיטה מקצה יחידת זמן מסוימת לאובייקט Moment.

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

שימוש ב-Moment.js לניתוח תאריך ושעה

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

כדי לנתח תאריך או שעה ממחרוזת, עליך להשתמש ב- רֶגַע() שיטה. במקרה זה, ה רֶגַע() השיטה לוקחת שני ארגומנטים, מחרוזת התאריך ומחרוזת פורמט.

הנה דוגמה לאופן שבו אתה יכול להשתמש ב- רֶגַע() שיטה לנתח תאריכים ושעות:

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


const תאריך = רגע('2920130000', 'Do-MMMM-YYYY').toDate();
לְנַחֵם.log(תאריך);


לַחֲזוֹר (


</div>
 )
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה

בגוש הקוד למעלה, רֶגַע() השיטה תנתח מחרוזת זו '2920130000' באמצעות מחרוזת פורמט "Do-MMMM-YYYY". ה toDate() שיטה ממירה את אובייקט הרגע ל אובייקט מקורי של JavaScript Date.

ה toDate() השיטה אינה לוקחת ארגומנטים ומחזירה אובייקט JavaScript Date המייצג את אותם תאריך ושעה כמו אובייקט הרגע.

הצגת זמן יחסי

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

לדוגמה:

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


const אתמול = רגע().subtract(7, 'יְוֹם');
const time1 = אתמול.fromNow(); // לפני 7 ימים
const time2 = אתמול.toNow(); // בעוד 7 ימים


לַחֲזוֹר (




{ time1 }</p>


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


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

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

עוד ל-Moment.js

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

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