تسهل مكتبة Day.js التعامل مع عمليات التاريخ والوقت في تطبيقات React.
تعد إدارة التاريخ والوقت أمرًا بالغ الأهمية لأي تطبيق ، و React ليست استثناءً. بينما توفر JavaScript وظائف مضمنة لمعالجة التاريخ والوقت ، إلا أنها قد تكون مرهقة. لحسن الحظ ، يمكن للعديد من مكتبات الجهات الخارجية تبسيط إدارة التاريخ والوقت في React. إحدى هذه المكتبات هي Day.js.
Day.js هي مكتبة خفيفة الوزن لتحليل التواريخ والأوقات والتحقق منها ومعالجتها وتنسيقها في JavaScript.
جارٍ تثبيت Day.js
ال Day.js المكتبة هي بديل حديث ل Moment.js ، وهي مكتبة أخرى تستخدم للتعامل مع التواريخ والأوقات. تقدم Day.js واجهة برمجة تطبيقات مشابهة ذات مساحة أصغر وأداء أسرع.
لاستخدام Day.js في تطبيق React ، تحتاج أولاً إلى تثبيته. يمكنك القيام بذلك عن طريق تشغيل الأمر التالي في جهازك الطرفي:
npm تثبيت dayjs
تحليل التواريخ والأوقات وتنسيقها
يوفر Day.js ملفات واجهة برمجة تطبيقات بسيطة لتحليل التواريخ وتنسيقها. يمكنك الحصول على التاريخ والوقت باستخدام ملف dayjs () الطريقة ، ولكن عليك أولاً استيرادها من مكتبة Day.js.
على سبيل المثال:
يستورد تتفاعل من'تتفاعل';
يستورد dayjs من"dayjs";وظيفةبرنامج() {
مقدار ثابت التاريخ = dayjs () ؛
وحدة التحكم.log (التاريخ) ؛يعود (
تاريخ وإدارة الوقت </p>
</div>
)
}
يصدّرتقصير برنامج
ال dayjs () تقوم الطريقة بإنشاء كائن Day.js جديد يمثل تاريخًا ووقتًا محددين. في المثال أعلاه ، فإن ملف dayjs () تقوم الطريقة بإنشاء كائن Day.js يمثل التاريخ والوقت الحاليين.
في وحدة التحكم الخاصة بك ، سيبدو كائن Day.js كما يلي:
ال dayjs () يقبل الأسلوب وسيطة تاريخ اختيارية يمكن أن تكون سلسلة أو رقمًا (طابع زمني Unix) ، كائن 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 ، تحتاج إلى استخدام ملحق شكل() طريقة. ال شكل() تتيح لك طريقة مكتبة Day.js تنسيق كائن Day.js كسلسلة وفقًا لسلسلة تنسيق معينة.
تأخذ الطريقة سلسلة تنسيق كوسيطة لها. يمكن أن تتضمن وسيطة السلسلة مجموعة من الأحرف والأحرف الخاصة ، لكل منها معنى محدد ،
على سبيل المثال:
يستورد تتفاعل من'تتفاعل';
يستورد dayjs من"dayjs";وظيفةبرنامج() {
مقدار ثابت التاريخ = dayjs ('2023-05-01').شكل("dddd، MMMM D، YYYY"); // الاثنين 1 مايو 2023
مقدار ثابت time = dayjs (). format ("HH: mm: ss"); //09:50:23
مقدار ثابت unixDate = dayjs (1651382400000).شكل("MM / DD / YY"); // 05/01/22يعود (
{تاريخ} </p>
{unixDate} </p>
{الوقت} </p>
</div>
)
}
يصدّرتقصير برنامج
ال تاريخ سيعرض المتغير التاريخ بهذا الشكل "الأربعاء ، 26 أبريل ، 2023". سلسلة التنسيق هي "dddd، MMMM D، YYYY" أين dddd هو يوم الأسبوع ، ش ش ش ش هو الشهر بالكلمات د هو يوم الشهر المكون من رقم أو رقمين ، و YYYY هي السنة المكونة من أربعة أرقام.
ال التاريخ يتم تنسيق المتغير كسلسلة باستخدام سلسلة التنسيق "MM / DD / YYYY،" الذي يمثل الشهر برقمين ، ويوم الشهر برقمين ، والسنة بأربعة أرقام.
ال وقت متغير يعرض الوقت الحالي بالتنسيق المحدد. سلسلة التنسيق هي "HH: mm: ss" أين ال ح ح يمثل الساعات مم يمثل الدقائق و ss يمثل الثواني.
التلاعب في التواريخ والأوقات
يوفر Day.js طرقًا متعددة تسهل التعامل مع التواريخ والأوقات. يمكنك الرجوع إلى Day.js وثائق رسمية للحصول على قائمة كاملة من الأساليب المتاحة لمعالجة التواريخ والأوقات.
على سبيل المثال:
يستورد تتفاعل من'تتفاعل';
يستورد dayjs من"dayjs";وظيفةبرنامج() {
مقدار ثابت التاريخ = dayjs (). أضف (7,'أيام').شكل("dddd، MMMM D، YYYY"); // الأربعاء 16 يونيو 2023
مقدار ثابت الوقت = dayjs (). طرح (2, 'ساعات').شكل("HH: mm: ss"); // 07:53:00يعود (
{تاريخ} </p>
{الوقت} </p>
</div>
)
}
يصدّرتقصير برنامج
تستخدم كتلة التعليمات البرمجية أعلاه الامتداد يضيف() طريقة لإضافة 7 أيام إلى التاريخ الحالي. ال يضيف() تسمح لك الطريقة بإضافة مقدار محدد من الوقت إلى كائن Day.js. تأخذ الطريقة وسيطتين ، مقدار الوقت لإضافة الأرقام والوحدة الزمنية للإضافة.
مع ال طرح او خصم() الطريقة ، يمكنك طرح مقدار معين من الوقت من Day.js هدف. ال وقت متغير يطرح ساعتين من الوقت الحالي باستخدام طرح او خصم() طريقة.
عرض الوقت النسبي
يوفر Day.js عدة طرق بما في ذلك من الان(), إلى الآن(), ل()، و من() لعرض الوقت النسبي ، مثل "قبل ساعتين" أو "بعد 3 أيام". لاستخدام هذه الطرق ، قم باستيراد ملف نسبي المساعد من dayjs / plugin / نسبيًا في تطبيق React الخاص بك.
على سبيل المثال:
يستورد تتفاعل من'تتفاعل';
يستورد dayjs من"dayjs";
يستورد نسبي من"dayjs / plugin / dynamicTime";وظيفةبرنامج() {
dayjs.extend (dynamicTime) ؛
مقدار ثابت التاريخ = dayjs (). أضف (7, 'أيام')
مقدار ثابت RelativeDate = date.fromNow () ، // في 7 أياممقدار ثابت date2 = dayjs (). اطرح (2, 'ساعات');
مقدار ثابت RelativeDate2 = date2.toNow () ، // في 2 ساعةمقدار ثابت lastYear = dayjs (). طرح (1, 'سنة');
مقدار ثابت فرق = date.from (lastYear) ؛ // في سنة
مقدار ثابت diff2 = date.to (lastYear) // قبل عاميعود (
{تاريخ نسبي} </p>
{نسبي تاريخ 2} </p>
{فرق} </p>
{فرق 2} </p>
</div>
)
}
يصدّرتقصير برنامج
ال من الان() تعرض الدالة سلسلة زمنية نسبية تمثل الفرق بين الوقت الحالي والتاريخ المحدد. في هذا المثال ، فإن ملف من الان() يعرض الفرق بين تاريخ والوقت الحالي.
ال إلى الآن() وظيفة مماثلة ل من الان() وظيفة من حيث أنها تعرض سلسلة تمثل الفرق بين التاريخ المحدد والوقت الحالي. عندما تتصل بـ إلى الآن() دالة ، تقوم بإرجاع سلسلة زمنية نسبية إلى الوقت الحالي.
أخيرًا ، باستخدام ملف من() و ل() وظائف ، يمكنك عرض سلسلة زمنية نسبية تمثل الفرق بين تاريخين محددين. في هذا المثال ، تحصل على الفرق بين العام الماضي و تاريخ باستخدام من() و ل() المهام.
ملاحظة ، يمكنك أيضًا تمرير وسيطة منطقية اختيارية إلى ملف من الان(), إلى الآن(), من()، و ل() أساليب لتحديد ما إذا كان سيتم تضمين اللاحقة أو استبعادها (على سبيل المثال "قبل" أو "في").
على سبيل المثال:
مقدار ثابت التاريخ = dayjs (). أضف (7, 'أيام')
مقدار ثابت RelativeDate = date.fromNow (حقيقي); // 7 أياممقدار ثابت date2 = dayjs (). اطرح (2, 'ساعات');
مقدار ثابت RelativeDate2 = date2.toNow (حقيقي); // ساعاتين
مقدار ثابت lastYear = dayjs (). طرح (1, 'سنة');
مقدار ثابت فرق = تاريخ. من (العام الماضي ، حقيقي) // سنة
مقدار ثابت diff2 = date.to (lastYear، حقيقي) // سنة
تمرير خطأ شنيع إلى الوسيطة سيعرض التواريخ مع اللاحقة.
إدارة التاريخ والوقت بشكل فعال
تعد إدارة التاريخ والوقت جانبًا مهمًا في أي تطبيق ، ويوفر Day.js مكتبة سهلة الاستخدام ومرنة للتعامل مع هذه العمليات في تطبيق React. من خلال دمج Day.js في مشروعك ، يمكنك بسهولة تنسيق التواريخ والأوقات وتحليل السلاسل ومعالجة المدد.
بالإضافة إلى ذلك ، تقدم Day.js مجموعة من المكونات الإضافية لتوسيع وظائفها وجعلها أكثر قوة. سواء كنت تقوم ببناء تقويم بسيط أو نظام جدولة معقد ، فإن Day.js هو خيار ممتاز لإدارة التاريخ والوقت في تطبيق React الخاص بك.
