Arabic (العربية/عربي) translation by osamagaradh (you can also view the original English article)
قد يكون العمل مع التاريخ والوقت مهمة مربكة للمطورين بدءًا من JavaScript. في هذا البرنامج التعليمي ، ستتعرف على مكتبة جافا سكريبت جديدة تسمى Luxon مما يجعله نسيمًا ان تعمل مع التاريخ والوقت في JavaScript.
طوال هذا البرنامج التعليمي، سوف تتعلم حول الميزات المختلفة لمكتبة لوكسون وكيفية استخدامها في مشاريع تطبيق الويب الخاص بك.
الشروع في العمل
ستقوم بإنشاء مشروع Angular-الزاوي- وسوف ترى كيفية استخدام مكتبة Luxon لمعالجة التاريخ والوقت في Angular. فلنبدأ بإنشاء تطبيق الويب الزاوي.
1 |
ng new AngularLuxon |
وبمجرد الانتهاء من إنشاء المشروع، انتقل إلى دليل المشروع وقم بإنشاء عنصر جديد يسمى لوكسديت.
1 |
ng g component luxdate |
سيكون لديك LuxdateComponent تم إنشاؤه وإضافته إلى الوحدة النمطية للتطبيق في الملف app.module.ts. قم بإزالة AppComponent الافتراضي من التطبيق عن طريق حذف ملفات المكون من مجلد src / التطبيق. إليك كيفية ظهور ملف app.module.ts:
1 |
import { BrowserModule } from '@angular/platform-browser'; |
2 |
import { NgModule } from '@angular/core'; |
3 |
|
4 |
import { LuxdateComponent } from './luxdate/luxdate.component'; |
5 |
|
6 |
|
7 |
@NgModule({ |
8 |
declarations: [ |
9 |
LuxdateComponent
|
10 |
],
|
11 |
imports: [ |
12 |
BrowserModule
|
13 |
],
|
14 |
providers: [], |
15 |
bootstrap: [LuxdateComponent] |
16 |
})
|
17 |
export class AppModule { } |
قم بتعديل الملف src/index.html لإضافة LuxdateComponent.
1 |
<body>
|
2 |
<app-luxdate></app-luxdate>
|
3 |
</body>
|
قم بحفظ التغييرات المذكورة أعلاه، وابدء تشغيل الملقم.
1 |
npm start |
سوف يكون لديك التطبيق قيد التشغيل في http://localhost:4200/.
دعنا نقم باستيراد مكتبة لوكسون في التطبيق الخاص بك.
1 |
npm install --save luxon |
بمجرد تثبيت Luxon في تطبيق Angular ، قم باستيراده في مكون LuxdateComponent. أنت الآن جاهز لاستخدام مكتبة Luxon في مشروعك.
التوقيت المحلي & وقت UTC باستخدام لوكسون
دعونا ننظر في كيفية الحصول على التوقيت المحلي باستخدام مكتبة لوكسون. قم باستيراد التاريخ والوقت من المكتبة لوكسون.
1 |
import { DateTime } from 'luxon'; |
داخل LuxdateComponent ، حدد متغير يسمى localDatetime.
1 |
public localDatetime; |
قم بتعيين قيمة المتغير localDatetime كما هو موضح:
1 |
this.localDatetime = DateTime.local(); |
قم بتقديم المتغير localDatetime في الملف luxdate.component.html.
1 |
<div class="container"> |
2 |
<div>
|
3 |
<div class="local"> |
4 |
<span>
|
5 |
{{localDatetime}}
|
6 |
</span>
|
7 |
</div>
|
8 |
</div>
|
9 |
</div>
|
احفظ التغييرات وسيكون لديك الوقت المحلي معروض على صفحة الويب.
1 |
2017-12-31T15:55:12.761+05:30 |
التاريخ والوقت المعروضان أعلاه هو التوقيت المحلي مع مرفق المنطقة الزمنية. يمكنك تنسيق التاريخ والوقت لابعد من ذلك لجعله أكثر سهولة.
قم بتنسيق التاريخ والوقت للعرض باستخدام السطر السفلي من التعليمة البرمجية.
1 |
this.localDatetime = DateTime.local().toLocaleString(DateTime.DATETIME_FULL); |
احفظ سطر التعليمات البرمجية أعلاه ، وسيكون لديك التاريخ والوقت التاليان معروضان.
1 |
December 31, 2017, 10:35 PM GMT+5:30 |
وبالمثل ، يعطي أسلوب .utc في كائن DateTime وقت UTC.
إضافة متغير جديد في LuxdateComponent لتعيين وقت UTC.
1 |
public utcDatetime; |
قم بتعيين قيمة متغير utcDatetime باستخدام كائن Datetime لLuxon.
1 |
this.utcDatetime = DateTime.utc().toLocaleString(DateTime.DATETIME_FULL); |
قم بتقديم متغير utcDatetime في الملف luxdate.component.html كما هو موضح:
1 |
<div class="container"> |
2 |
<h2>Luxon Library</h2> |
3 |
<div class="time"> |
4 |
<div class="local"> |
5 |
<span class="label"> |
6 |
Local time : |
7 |
</span>
|
8 |
<span>
|
9 |
{{localDatetime}}
|
10 |
</span>
|
11 |
</div>
|
12 |
<div class="utc"> |
13 |
<span class="label"> |
14 |
UTC time : |
15 |
</span>
|
16 |
<span>
|
17 |
{{utcDatetime}}
|
18 |
</span>
|
19 |
</div>
|
20 |
</div>
|
21 |
</div>
|
قم بإضافة نمط CSS التالي إلى الملف luxdate.component.css.
1 |
.container{ |
2 |
text-align: center; |
3 |
width: 100%; |
4 |
}
|
5 |
.time{ |
6 |
display: inline-block; |
7 |
}
|
8 |
.local{ |
9 |
border: 1px solid #8c8282; |
10 |
text-align: left; |
11 |
background-color: burlywood; |
12 |
padding: 10px; |
13 |
}
|
14 |
.utc{ |
15 |
margin-top: 30px; |
16 |
border: 1px solid #8c8282; |
17 |
text-align: left; |
18 |
background-color: burlywood; |
19 |
padding: 10px; |
20 |
}
|
21 |
.label{ |
22 |
font-family: serif; |
23 |
font-size: 22px; |
24 |
font-style: initial; |
25 |
}
|
احفظ التغييرات المذكورة أعلاه، وسوف تكون قادر على عرض التوقيت المحلي والتوقيت UTC باستخدام مكتبة لوكسون.
من أجل عرض التوقيت المحلي والتوقيت مع شمول الثواني، يمكنك استخدام DATETIME_FULL_WITH_SECONDS. هنا كيف ستبدو:
1 |
ngOnInit() { |
2 |
this.localDatetime = DateTime.local().toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS); |
3 |
this.utcDatetime = DateTime.utc().toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS); |
4 |
}
|
احفظ التغييرات ، وسيكون لديك التوقيت المحلي ومعروض لديك توقيت UTC مع الثواني.
التاريخ العام ومعلومات الوقت باستخدام لوكسون
توفر مكتبة Luxon فئة معلومات تساعد في الحصول على بعض المعلومات العامة المتعلقة بالتاريخ والوقت.
عند التعامل مع التاريخ والوقت ، من الشائع أن تحتاج إلى قائمة الأشهر في سنة. باستخدام فئة المعلومات ، يمكنك الحصول على قائمة الأشهر كمصفوفة.
قم باستيراد فئة المعلومات في ملف luxdate.component.ts.
1 |
import { DateTime, Info } from 'luxon'; |
قم بتعريف متغير لقائمة الأشهر وقم بتهيئته.
1 |
public months; |
2 |
|
3 |
constructor() { |
4 |
this.months = []; |
5 |
}
|
قم بتعيين قائمة الشهور من الفئة المعلوماتية.
1 |
this.months = Info.months(); |
قم بإضافة HTML التالي إلى الملف luxdate.component.html لعرض محتوى متغير الشهور.
1 |
<div class="month"> |
2 |
<span class="label"> |
3 |
Month : |
4 |
</span>
|
5 |
<span>
|
6 |
<select>
|
7 |
<option *ngFor="let month of months; let i = index"> |
8 |
{{month}}
|
9 |
</option>
|
10 |
</select>
|
11 |
</span>
|
12 |
</div>
|
احفظ التغييرات المذكورة أعلاه، وستكون لديك قائمة الشهور عامرة.
وبالمثل، استخدام الأسلوب أيام الأسبوع يعطيك قائمة بأيام الأسبوع.
1 |
this.weeks = Info.weekdays(); |
احفظ التغييرات، وسيكون لديك أيام الأسبوع مصفوفة على الشاشة.
كما يوفر لوكسون خياراً للحصول على قائمة meridiems باستخدام الأسلوب meridiems .
1 |
this.meridians = Info.meridiems(); |
قم بتعديل التعليمات البرمجية ل HTML في luxdate.component.html لعرض الأسابيع وmeridians-خطوط الطول- .
1 |
<div class="month"> |
2 |
<span>
|
3 |
<select>
|
4 |
<option *ngFor="let month of months; let i = index"> |
5 |
{{month}}
|
6 |
</option>
|
7 |
</select>
|
8 |
</span>
|
9 |
<span>
|
10 |
<select>
|
11 |
<option *ngFor="let week of weeks; let i = index"> |
12 |
{{week}}
|
13 |
</option>
|
14 |
</select>
|
15 |
</span>
|
16 |
<span>
|
17 |
<select>
|
18 |
<option *ngFor="let meridian of meridians; let i = index"> |
19 |
{{meridian}}
|
20 |
</option>
|
21 |
</select>
|
22 |
</span>
|
23 |
</div>
|
احفظ التغييرات، وسوف تكون قادراً على عرض الأسابيع وعرض خطوط الطول.
التعامل مع التدويل باستخدام لوكسون
توفر Luxon فئة إعداد ، والتي يمكنك من خلالها التعامل مع سلوك Luxon بشكل عام. لنقم بتعيين الإعدادات المحلية الافتراضية لـ Luxon إلى el.
قم باستيراد فئة الاعدادات في الملف luxdate.component.ts.
1 |
import { DateTime, Settings, Info } from 'luxon'; |
في أسلوب المنشئ ل LuxdateComponent ، قم بتعيين اللغة الافتراضية كما هو موضح:
1 |
constructor() { |
2 |
Settings.defaultLocale = 'el'; |
3 |
}
|
احفظ التغييرات، وسوف يكون لديك المكان الافتراضي معين إلى el.
ضع نطاق للمعلومات باستخدام لوكسون
توفر مكتبة Luxon واجهة للحصول على التفاصيل المتعلقة بمنطقة معينة لكائن DateTime. لاستخدامه ، تحتاج إلى استيراد Zone من مكتبة Luxon.
1 |
import { DateTime, Settings, Info, Zone } from 'luxon'; |
لنحاول استخدام Zone على كائن DateTime ل Luxon .قم بإنشاء كائن DateTime محلي ل Luxon .
1 |
let dateObj = DateTime.local(); |
يمكنك استخدام واجهة Zone على dateObj للحصول على اسم المنطقة. أضف التعليمات البرمجية التالية لتسجيل اسم المنطقة.
1 |
console.log('Zone name is ', dateObj.zone.name); |
احفظ التغييرات، وفي تشغيل التطبيق، سوف تكون قادراً على عرض اسم المنطقة مسجلاً في وحدة تحكم المستعرض.
1 |
Zone name is Asia/Kolkata |
دعونا نحاول طباعة اسم منطقة كائن DateTime ل يو تي سي.
1 |
let utcObj = DateTime.utc(); |
2 |
console.log('Zone name is ', utcObj.zone.name); |
ستقوم التعليمة البرمجية المذكورة أعلاه بطباعة اسم المنطقة باسم UTC.
1 |
Zone name is UTC |
توفر واجهة منطقة Luxon طريقة لمقارنة منطقتين زمنيتين. لنحاول مقارنة المنطقة الزمنية لكائنات DateTime ,localObj و utcObj.
1 |
if(localObj.zone.equals(utcObj.zone)){ |
2 |
console.log('Both zones are equal'); |
3 |
} else{ |
4 |
console.log('Both zones are different'); |
5 |
}
|
كما هو موضح في الكود السابق ، استخدمت أسلوب zone.equals لمقارنة المناطق. احفظ التغييرات وحاول تشغيل التطبيق ، وستحصل على النتيجة مسجّلة.
1 |
Both zones are different |
الفاصل الزمني في لوكسون
الفاصل الزمني في Luxon هو غلاف لنقطتي نهاية منDateTime والتي يمكن معالجتها باستخدام أساليب Luxon. من الوثائق الرسمية:
يمثل كائن الفاصل الزمني فاصل زمني نصف مفتوح ، حيث تكون كل نقطة نهاية هي DateTime. من الناحية المفاهيمية ، إنها حاوية لهاتين النقطتين النهائيتن ، مصحوبة بأساليب لإنشاء ، تحليل ، استجواب ، مقارنة ، تحويل ، وتنسيق لهم.
هناك طريقتان مختلفتان لإنشاء فاصل زمني باستخدام Luxon. دعونا ننظر في كيفية إنشاء فاصل زمني باستخدام كائن بداية ونهاية من DateTime
قم باستيراد الفاصل الزمني من لوكسون في LuxdateComponent
1 |
import { Interval } from 'luxon'; |
قم بإنشاء كائن DateTime بداية وكائن نهاية DateTime.
1 |
let startDate = DateTime.local(); |
2 |
let endDate = DateTime.local().plus({minutes : 15}); |
كما رأينا في التعليمات البرمجية أعلاه، قمت بإنشاء startDate باستخدام التوقيت المحلي الحالي و endDate بزيادة التوقيت المحلي ب 15 دقيقة.
قم إنشاء فاصل زمني باستخدام الأسلوب fromDateTimes .
1 |
let intv = Interval.fromDateTimes(startDate, endDate); |
2 |
console.log('Interval is ',intv); |
احفظ التغييرات المذكورة أعلاه، وفي تشغيل التطبيق، ستكون لديك الفترة مسجلة.
الآن يمكنك تطبيق أسلوب Luxon لمعالجة أو تنسيق وقت البدء والانتهاء في الكائن الفاصل. لنفترض أنك تريد التحقق من اسم المنطقة لوقت البدء في الفاصل الزمني. يمكنك القيام بذلك باستخدام خاصية zone.name كما هو موضح:
1 |
console.log('Start date zone is ',intv.s.zone.name); |
سوف يكون لديك الاخراج التالي مسجل في وحدة تحكم المستعرض:
1 |
Start date zone is Asia/Kolkata
|
إنشاء مدة باستخدام لوكسون
يوفر Luxon زوج من الأساليب لإنشاء مدة. للبدء في إنشاء المدة ، ستحتاج إلى استيراد المدة في LuxdateComponent خاصتك.
1 |
import { Duration } from 'luxon'; |
بمجرد استيرادها ، يمكنك استخدام الأسلوب fromMillis لإنشاء مدة بتحديد عدد الاجزاء من الثواني.
1 |
let fiveMinute = Duration.fromMillis(5 * 60 * 1000); |
2 |
console.log('Five minutes is ', fiveMinute); |
احفظ التغييرات، وفي تشغيل التطبيق، سيكون لديك مدة fiveMinute أعلاه مسجلة.
يمكنك أيضًا استخدام كائن DateTime آخر لإنشاء مدة باستخدام الأسلوب fromObject. إليك كيفية ظهور الشفرة:
1 |
let startDate = DateTime.local(); |
2 |
let dur = Duration.fromObject(startDate); |
3 |
console.log('Duration from object is ', dur); |
احفظ التغييرات، وسيكون لديك المدة مسجلة في وحدة تحكم المستعرض.
في الختام
في هذا البرنامج التعليمي ، رأيت كيفية البدء باستخدام مكتبة Luxon للعمل مع التاريخ والوقت في مشروع ويب زاوي. تعلمت كيفية التعامل مع التوقيت المحلي ووقت UTC ، وكيفية إنشاء فاصل زمني ومدته باستخدام Luxon.
للحصول على معلومات متعمقة حول استخدام المكتبة لوكسون، أوصي بقراءة الوثائق الرسمية.
كيف كانت تجربتك بتعلم العمل مع لوكسون؟ اسمحوا لنا أن نعرف أفكاركم في التعليقات أدناه.
