4 חבילות לעבודה עם תאריך ושעה ב-JavaScript

התמיכה המובנית של JavaScript לטיפול בתאריכים שימושית, אך היא עלולה להיות מביכה לשימוש. פעולות מורכבות כמו המרות אזור זמן ועיצוב תאריך הן לרוב מאתגרות.

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

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

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

כדי להתקין את Moment.js עם npm, הפעל את הפקודה הבאה מספריית הפרויקט שלך:

npm להתקין רֶגַע

לאחר ההתקנה, תוכל לייבא את Moment.js לפרויקט שלך ולבצע פעולות עם הספרייה:

const רגע = לִדרוֹשׁ('רֶגַע');
const עכשיו = רגע();
const nowString = now.format('YYYY-MM-DD HH: mm: ss');
לְנַחֵם.עֵץ(`התאריך והשעה הנוכחיים הם ${nowString}`);

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

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

אתה יכול גם להשתמש בספרייה זו כדי להוסיף ולהחסיר מרווחי זמן:

const addTenMinutes = moment().add(10, 'דקות');
לְנַחֵם.עֵץ(`${addTenMinutes.format('ח: ממ א')}`);
const subtractTwoDays = moment().subtract(2, 'ימים');
לְנַחֵם.עֵץ(`${subtractTwoDays.format('dddd, MMMM Do YYYY')}`);

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

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

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

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

אתה יכול להתקין את Luxon עם npm ואז לייבא את זה תאריך שעה class בפרויקט Node.js שלך באמצעות ה- לִדרוֹשׁ() פוּנקצִיָה:

const { DateTime } = לִדרוֹשׁ('לוקסון');

ב-Luxon, אובייקטי DateTime מתייחסים למופעי זמן שיורדים עד מילי-שניות.

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

const now = DateTime.now();
const year = now.year;
const דקה = עכשיו.דקה;
const second = now.second;

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

ההבדל העיקרי בין Luxon.js ל-Moment.js הוא האופי הבלתי משתנה שלו. כל אובייקטי DateTime ניתנים לשינוי ב- Luxon, כלומר לא ניתן לשנות את מאפייני DateTime. במקום זאת, אתה יכול ליצור מופעי DateTime חדשים ממופעים קיימים.

לדוגמה:

const now = DateTime.now();
const מחר = now.plus({ ימים: 1 });

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

יתרון נוסף של Luxon.js הוא התמיכה האמינה שלו באזור הזמן, החיונית לעבודה עם תאריכים ושעות ביישומי אינטרנט מודרניים. הספרייה משתמשת ממשק ה-API הבינלאומי בדפדפנים מודרניים כדי לספק תמיכה מדויקת באזור זמן.

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

Date-fns היא ספריית JavaScript קלת משקל המיועדת לעבודה עם תאריכים ושעות. זה מתבסס על אובייקט JavaScript המקורי.

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

לאחר התקנת date-fns עם npm, ייבא את החבילה לתוכנית שלך באמצעות הפונקציה require:

const { format, addDays } = לִדרוֹשׁ('תאריך-fns');

Date-fns הוא מודולרי. הוא מכיל הרבה פונקציות שאתה יכול לגשת אליהן על ידי ביטול החבילה, כפי שמוצג בבלוק הקוד למעלה. הקוד מייבא רק את הפורמט ופונקציות addDays מספריית date-fns.

להלן דוגמה כיצד להשתמש בשתי הפונקציות הללו:

const היום = חָדָשׁתַאֲרִיך();
const formattedDate = פורמט (היום, 'yyyy-MM-dd');
לְנַחֵם.log (formattedDate); 
const מחר = פורמט (addDays (היום, 1), 'yyyy-MM-dd');
לְנַחֵם.log (מחר);

תוכנית זו מדגימה שימוש בספריית date-fns ב-JavaScript כדי לעצב ולתפעל תאריכים.

זה יוצר חדש תַאֲרִיך אובייקט המייצג את התאריך הנוכחי. זה מעצב את התאריך הנוכחי באמצעות פוּרמָט פונקציה מספריית date-fns.

לאחר מכן הוא משתמש ב- addDays פונקציה ליצירת אובייקט Date חדש המייצג את התאריך של מחר, מעצבת אותו באמצעות ה- פוּרמָט פונקציה, ורושמת גם את התאריך הנוכחי וגם את התאריך של מחר לקונסולה ב"yyyy-MM-dd"פורמט.

החיסרון בשימוש ב-Date-fns הוא שהוא אינו מספק תמיכה באזור זמן. במקום זאת, הוא משתמש בספרייה נפרדת כדי לעבוד עם אזורי זמן באמצעות פונקציות עוזר.

Day.js, עוד ספרייה קלה מאוד, היא בחירה טובה אם אתה מחפש אלטרנטיבה בלתי משתנה, קטנה ומהירה יותר ל-Moment.js.

אתה יכול להתקין את Day.js כחבילה בפרויקט JavaScript שלך על ידי הפעלת הפקודה npm הבאה:

npm להתקין dayjs

כדי לייבא את Day.js לפרויקט שלך לאחר ההתקנה, תוכל להשתמש בקוד הבא:

const dayjs = לִדרוֹשׁ('dayjs')

להלן כמה פונקציות ושיטות בסיסיות הזמינות ב-Day.js

const now = dayjs();
const תאריך = dayjs('2023-03-23', 'YYYY-MM-DD');
const month = date.month();
const formattedDate = date.format('MMMM D, YYYY');
const שבוע הבא = date.add(1, 'שָׁבוּעַ');

הקוד שלמעלה יוצר אובייקט Day.js חדש המייצג את התאריך והשעה הנוכחיים, מנתח מחרוזת תאריך בפורמט מותאם אישית, ומקבל את החודש מה- תַאֲרִיך מִשְׁתַנֶה. זה גם מראה כיצד לעצב ולהוסיף למופע תאריך.

כמו Date-fns, Day.js לא יכול לספק תמיכה באזור זמן בעצמו. Day.js משתמש במערכת פלאגין, מה שהופך אותה לבלבול בשימוש.

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

בחירת הספרייה המתאימה לאפליקציה שלך

בחירת ספריית התאריך והשעה הנכונים עבור אפליקציית ה-JavaScript שלך היא החלטה חשובה שיכולה להיות בעלת השפעה גדולה על האיכות והתחזוקה של הקוד שלך.

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