Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

استخدام لوكسون للتاريخ والوقت في جافا سكريبت

by
Read Time:8 minsLanguages:

Arabic (العربية/عربي) translation by osamagaradh (you can also view the original English article)

قد يكون العمل مع التاريخ والوقت مهمة مربكة للمطورين بدءًا من JavaScript. في هذا البرنامج التعليمي ، ستتعرف على مكتبة جافا سكريبت جديدة تسمى Luxon مما يجعله نسيمًا ان تعمل مع التاريخ والوقت في JavaScript.

طوال هذا البرنامج التعليمي، سوف تتعلم حول الميزات المختلفة لمكتبة  لوكسون وكيفية استخدامها في مشاريع تطبيق الويب الخاص بك.

الشروع في العمل

ستقوم بإنشاء مشروع Angular-الزاوي- وسوف ترى كيفية استخدام مكتبة Luxon لمعالجة التاريخ والوقت في Angular. فلنبدأ بإنشاء تطبيق الويب الزاوي.

وبمجرد الانتهاء من إنشاء المشروع، انتقل إلى دليل المشروع وقم بإنشاء عنصر جديد يسمى لوكسديت.

سيكون لديك LuxdateComponent   تم إنشاؤه وإضافته إلى الوحدة النمطية للتطبيق في الملف app.module.ts. قم بإزالة AppComponent الافتراضي من التطبيق عن طريق حذف ملفات المكون من مجلد src / التطبيق. إليك كيفية ظهور ملف app.module.ts:

قم بتعديل الملف src/index.html لإضافة LuxdateComponent.

قم بحفظ التغييرات المذكورة أعلاه، وابدء تشغيل الملقم.

سوف يكون لديك التطبيق قيد التشغيل في http://localhost:4200/.

دعنا نقم باستيراد مكتبة لوكسون في التطبيق الخاص بك.

 بمجرد تثبيت Luxon في تطبيق Angular ، قم باستيراده في مكون LuxdateComponent. أنت الآن جاهز لاستخدام مكتبة Luxon في مشروعك.

التوقيت المحلي & وقت UTC باستخدام لوكسون

دعونا ننظر في كيفية الحصول على التوقيت المحلي باستخدام مكتبة لوكسون. قم باستيراد التاريخ والوقت من المكتبة لوكسون.

داخل LuxdateComponent ، حدد متغير يسمى localDatetime.

قم بتعيين قيمة المتغير localDatetime  كما هو موضح:

قم بتقديم المتغير localDatetime  في الملف luxdate.component.html.

احفظ التغييرات وسيكون لديك الوقت المحلي معروض على صفحة الويب.

التاريخ والوقت المعروضان أعلاه هو التوقيت المحلي مع مرفق المنطقة الزمنية. يمكنك تنسيق التاريخ والوقت لابعد من ذلك لجعله أكثر سهولة.

قم بتنسيق التاريخ والوقت للعرض باستخدام  السطر السفلي من التعليمة البرمجية.

 احفظ سطر التعليمات البرمجية أعلاه ، وسيكون لديك التاريخ والوقت التاليان معروضان.

 وبالمثل ، يعطي أسلوب .utc في كائن DateTime وقت UTC.

إضافة متغير جديد في LuxdateComponent  لتعيين وقت UTC.

 قم بتعيين قيمة متغير utcDatetime باستخدام كائن Datetime لLuxon.

قم بتقديم متغير utcDatetime في الملف luxdate.component.html كما هو موضح:

قم بإضافة نمط CSS التالي إلى الملف luxdate.component.css.

احفظ التغييرات المذكورة أعلاه، وسوف تكون قادر على عرض التوقيت المحلي والتوقيت UTC  باستخدام مكتبة لوكسون.

Luxon Library - Local Time UTC TimeLuxon Library - Local Time UTC TimeLuxon Library - Local Time UTC Time

من أجل عرض التوقيت المحلي والتوقيت مع شمول الثواني، يمكنك استخدام DATETIME_FULL_WITH_SECONDS. هنا كيف ستبدو:

احفظ التغييرات ، وسيكون لديك التوقيت المحلي ومعروض لديك توقيت UTC مع الثواني.

Luxon Library - Local UTC Time With SecondsLuxon Library - Local UTC Time With SecondsLuxon Library - Local UTC Time With Seconds

التاريخ العام ومعلومات الوقت باستخدام لوكسون

 توفر مكتبة Luxon فئة معلومات تساعد في الحصول على بعض المعلومات العامة المتعلقة بالتاريخ والوقت.

عند التعامل مع التاريخ والوقت ، من الشائع أن تحتاج إلى قائمة الأشهر في سنة. باستخدام فئة المعلومات ، يمكنك الحصول على قائمة الأشهر كمصفوفة.

قم باستيراد فئة المعلومات في ملف luxdate.component.ts.

 قم بتعريف متغير لقائمة الأشهر وقم بتهيئته.

قم بتعيين قائمة الشهور من الفئة المعلوماتية.

قم بإضافة HTML التالي إلى الملف luxdate.component.html لعرض محتوى متغير الشهور.

احفظ التغييرات المذكورة أعلاه، وستكون لديك قائمة الشهور عامرة.

Luxon Library - MonthsLuxon Library - MonthsLuxon Library - Months

وبالمثل، استخدام الأسلوب أيام الأسبوع يعطيك قائمة بأيام الأسبوع.

احفظ التغييرات، وسيكون لديك أيام الأسبوع مصفوفة على الشاشة.

كما يوفر لوكسون خياراً للحصول على قائمة meridiems باستخدام الأسلوب meridiems .

قم بتعديل التعليمات البرمجية ل HTML في luxdate.component.html لعرض الأسابيع وmeridians-خطوط الطول- .

احفظ التغييرات، وسوف تكون قادراً على عرض الأسابيع وعرض خطوط الطول.

Luxon Library - Weeks MeridiansLuxon Library - Weeks MeridiansLuxon Library - Weeks Meridians

التعامل مع التدويل باستخدام لوكسون

توفر Luxon فئة إعداد ، والتي يمكنك من خلالها التعامل مع سلوك Luxon بشكل عام. لنقم بتعيين الإعدادات المحلية الافتراضية لـ Luxon إلى el.

قم باستيراد فئة الاعدادات في الملف luxdate.component.ts.

في أسلوب المنشئ ل LuxdateComponent ، قم بتعيين اللغة الافتراضية كما هو موضح:

احفظ التغييرات، وسوف يكون لديك المكان الافتراضي معين إلى el.

Luxon - Setting LocaleLuxon - Setting LocaleLuxon - Setting Locale

ضع نطاق للمعلومات باستخدام لوكسون

 توفر مكتبة Luxon واجهة للحصول على التفاصيل المتعلقة بمنطقة معينة لكائن DateTime. لاستخدامه ، تحتاج إلى استيراد Zone من مكتبة Luxon.

لنحاول استخدام Zone على كائن DateTime ل Luxon .قم بإنشاء كائن DateTime  محلي ل Luxon .

يمكنك استخدام واجهة Zone على dateObj للحصول على اسم المنطقة. أضف التعليمات البرمجية التالية لتسجيل اسم المنطقة.

احفظ التغييرات، وفي تشغيل التطبيق، سوف تكون قادراً على عرض اسم المنطقة مسجلاً في وحدة تحكم المستعرض.

دعونا نحاول طباعة اسم منطقة كائن DateTime ل يو تي سي.

 ستقوم التعليمة البرمجية المذكورة أعلاه بطباعة اسم المنطقة باسم UTC.

توفر واجهة منطقة Luxon طريقة لمقارنة منطقتين زمنيتين. لنحاول مقارنة المنطقة الزمنية لكائنات DateTime ,localObj و utcObj.

كما هو موضح في الكود السابق ، استخدمت أسلوب zone.equals لمقارنة المناطق. احفظ التغييرات وحاول تشغيل التطبيق ، وستحصل على النتيجة مسجّلة.

الفاصل الزمني في لوكسون

الفاصل الزمني في Luxon هو غلاف لنقطتي نهاية منDateTime والتي يمكن معالجتها باستخدام أساليب Luxon. من الوثائق الرسمية:

يمثل كائن الفاصل الزمني فاصل زمني نصف مفتوح ، حيث تكون كل نقطة نهاية هي DateTime. من الناحية المفاهيمية ، إنها حاوية لهاتين النقطتين النهائيتن ، مصحوبة بأساليب لإنشاء ، تحليل ، استجواب ، مقارنة ، تحويل ، وتنسيق لهم.

 هناك طريقتان مختلفتان لإنشاء فاصل زمني باستخدام Luxon. دعونا ننظر في كيفية إنشاء فاصل زمني باستخدام كائن بداية ونهاية من DateTime

 قم باستيراد الفاصل الزمني من لوكسون في LuxdateComponent

 قم بإنشاء كائن DateTime بداية وكائن نهاية  DateTime.

كما رأينا في التعليمات البرمجية أعلاه، قمت بإنشاء startDate باستخدام التوقيت المحلي الحالي و endDate بزيادة التوقيت المحلي ب 15 دقيقة.

قم إنشاء فاصل زمني باستخدام الأسلوب fromDateTimes .

احفظ التغييرات المذكورة أعلاه، وفي تشغيل التطبيق، ستكون لديك الفترة مسجلة.

Luxon Library IntervalLuxon Library IntervalLuxon Library Interval

الآن يمكنك تطبيق أسلوب Luxon لمعالجة أو تنسيق وقت البدء والانتهاء في الكائن الفاصل. لنفترض أنك تريد التحقق من اسم المنطقة لوقت البدء في الفاصل الزمني. يمكنك القيام بذلك باستخدام خاصية zone.name كما هو موضح:

سوف يكون لديك الاخراج التالي مسجل في وحدة تحكم المستعرض:

إنشاء مدة باستخدام لوكسون

يوفر Luxon زوج من الأساليب لإنشاء مدة. للبدء في إنشاء المدة ، ستحتاج إلى استيراد المدة في LuxdateComponent خاصتك.

بمجرد استيرادها ، يمكنك استخدام الأسلوب fromMillis لإنشاء مدة بتحديد عدد الاجزاء من الثواني.

احفظ التغييرات، وفي تشغيل التطبيق، سيكون لديك مدة fiveMinute أعلاه مسجلة.

Duration Using MilliSecondsDuration Using MilliSecondsDuration Using MilliSeconds

 يمكنك أيضًا استخدام كائن DateTime آخر لإنشاء مدة باستخدام الأسلوب fromObject. إليك كيفية ظهور الشفرة:

احفظ التغييرات، وسيكون لديك المدة مسجلة  في وحدة تحكم المستعرض.

Duration Using DateTime ObjectDuration Using DateTime ObjectDuration Using DateTime Object

في الختام

في هذا البرنامج التعليمي ، رأيت كيفية البدء باستخدام مكتبة Luxon للعمل مع التاريخ والوقت في مشروع ويب زاوي. تعلمت كيفية التعامل مع التوقيت المحلي ووقت UTC ، وكيفية إنشاء فاصل زمني ومدته باستخدام Luxon.

للحصول على معلومات متعمقة حول استخدام المكتبة لوكسون، أوصي بقراءة الوثائق الرسمية.

كيف كانت تجربتك بتعلم العمل مع لوكسون؟ اسمحوا لنا أن نعرف أفكاركم في التعليقات أدناه.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.