مقدمة

غالبًا ما نصادف العديد من المنتديات والمواقع الإلكترونية التي نحتاج فيها إلى إدخال تاريخ ميلادنا أو تحديد تاريخ لموعد لأي سبب، ويظهر رمز يشبه التقويم أمام أعيننا مباشرةً. كيف وأين ينبثق من؟ يجب أن يكون تقويمًا محددًا وديناميكيًا يتعرف علينا بذكاء ويقدم لنا تحديد التواريخ التي نرغب فيها. هذا هو المكان الذي يأتي فيه React Date Picker. في هذا البرنامج التعليمي، سنتعلم كل هذه الأساليب من البداية إلى المستوى المتقدم حول كيفية تنفيذها في React وكيف يمكن تخصيصها. دعونا نمضي قدما في المناقشة.

ال تتفاعل يعد منتقي التاريخ مكونًا مفيدًا ووافرًا يستخدم لعرض التواريخ باستخدام تنسيق حوار التقويم. عادةً ما يكون هناك الكثير من خيارات منتقي التاريخ المتاحة هذه الأيام. يمكن أن يكون لكل منهم جوانب وتطبيقات تقنية مختلفة. في هذا البرنامج التعليمي، سنتعامل على وجه التحديد مع React Date Picker. لتحقيق ذلك، نحتاج إلى حزمة تعرض الوقت والتاريخ. من أجل فهم أفضل، سنقوم بإنشاء تطبيق من شأنه أن يساعدنا على فهم React Date Picker بشكل أفضل. ولكن قبل ذلك، لنقم بتثبيته كما هو موضح في الخطوات أدناه.

تثبيت

لتثبيت Date Picker لتطبيق React الخاص بنا، نحتاج إلى تثبيت Node.js مسبقًا على نظامنا. على الرغم من أنه ليس من المهم أن يكون لديك دائمًا وحدات العقدة، إلا أنه يوصى بشدة بتنزيلها بحيث يتم تقديم جميع التبعيات بكفاءة. ولذلك، فإن أمر تثبيت React Date Picker موضح أدناه.

يمكن تثبيت الحزمة عبر npm:

مسج هذه النقرة

 npm install react-datepicker --save 

أو عبر غزل:

 yarn add react-datepicker 

قد تكون هناك حاجة لتثبيت React وأنواع خصائصها بشكل فردي لأنه بدون هذه التبعيات، من المستحيل إنشاء منتقي تاريخ React. أيضًا، قد نحتاج إلى استخدام CSS من الحزم الخارجية حتى يبدو منتقي التاريخ رائعًا من الناحية المرئية. للبدء في تطبيقنا، نحتاج إلى استيراد منتقي تاريخ React في ملفنا الرئيسي، ونحتاج إلى الاستمرار في التحقق منه من خلال عرض React.

 import React, { useState } from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; // CSS Modules, react-datepicker-cssmodules.css // import 'react-datepicker/dist/react-datepicker-cssmodules.css'; const Example = () => { const [startDate, setStartDate] = useState(new Date()); return ( setStartDate(date)} /> ); }; 

رد فعل على سبيل المثال منتقي التاريخ

بافتراض أن نظامنا مهيأ بجميع متطلبات التثبيت والتبعيات، سنتعلم كيفية إنشاء تطبيق React من البداية. يعتمد هذا التنفيذ بالكامل على تطبيق React datepicker.

في المناقشة أعلاه، نفترض أننا قمنا بتثبيت React وPropTypes بشكل مستقل لأن هذه التبعيات غير مدمجة في الحزمة نفسها. لمتابعة طرق بناء تطبيقنا، نحتاج إلى اتباع الخطوات المذكورة أدناه.

 npx create-react-app react-datepicker-app 

انتقل داخل مجلد المشروع باستخدام الأمر.

 cd react-datepicker-app 

ابدأ تطبيق React.

 npm start 

بعد بدء تشغيل محرك Node، يمكننا التحقق من تطبيقنا من خلال المنفذ رقم 3000 للمضيف المحلي. نحتاج أيضًا إلى تضمين مقتطف التعليمات البرمجية الموضح أدناه في ملف app.js الخاص بنا بحيث يتم استيراد المكونات المهمة لـ React Date Picker إلى ملفنا.

 // app.js import React, { Component } from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import 'bootstrap/dist/css/bootstrap.min.css'; class App extends Component { constructor (props) { super(props) this.state = { startDate: new Date() }; this.handleChange = this.handleChange.bind(this); this.onFormSubmit = this.onFormSubmit.bind(this); } handleChange(date) { this.setState({ startDate: date }) } onFormSubmit(e) { e.preventDefault(); console.log(this.state.startDate) } render() { return ( Show Date ); } } export default App; 

سيبدو تطبيقنا الآن مثل هذا.

في العينة المشفرة أعلاه، قمنا أولاً باستيراد حزم منتقي التاريخ و بوتستراب في قالب رد الفعل. ثم قمنا بتعريفه لربط التعامل مع التغيير وأرسل المكون في تقويم الحدث. سيتم تشغيل هذه الأحداث تلقائيًا عندما يقوم المستخدم بإرسال أو تغيير قيم قيمة إدخال منتقي التاريخ. لاحقًا، قمنا بتهيئة حالة نموذج Datepicker بحالة جديدة تاريخ() كائن داخل المنشئ. وأخيرًا، قمنا ببدء منتقي البيانات بالتوجيه أدناه لإضافة بعض الخصائص إليه.

يمكننا تصور الإخراج في شكل تنسيق منتقي البيانات الذي يركز على التقويم. يضيف Datepicker المذكور أعلاه خصائص مخصصة إلى مكونات تطبيق React الموضحة أعلاه. يسمح لنا باختيار التواريخ في شكل أشهر، أيام، و سنين .

أتمتة حتمية محدودة

علاوة على ذلك، لتخصيص منتقي التاريخ، لدينا طرق أخرى مختلفة، سواء كان ذلك تلوين المكونات أو تطبيق الوظائف بذكاء لالتقاط التواريخ. يمكننا أيضًا تخصيصها بسهولة إذا كان لدينا مكونات HTML وCSS مرتبطة بملف app.js.

توطين منتقي التاريخ

هناك مثال آخر سنتعرف عليه وهو تحديد موقع Datepicker. يعتمد منتقي التاريخ الذي سنقوم بإنشائه بشكل كبير على تدويل date-fns. وذلك لأنه يتم استخدامه لتوطين العناصر التي سيتم عرضها. إذا كنا بحاجة إلى استخدام لغة باستثناء اللغة الافتراضية en-US، فقد نحتاج إلى استيرادها إلى المشروع من date-fns.

علاوة على ذلك، فإن اللغة الإنجليزية هي اللغة الافتراضية التي تتكون من 3 طرق لتعيين اللغة.

تسجيل المحلية (سلسلة، كائن): تحميل كائن لغة مستورد من date-fns.

تعيين اللغة الافتراضية (سلسلة): تعيين لغة مسجلة كإعداد افتراضي لجميع مثيلات منتقي التاريخ.

الطباعة من جافا

الحصول على القيمة الافتراضية: تقوم بإرجاع سلسلة توضح اللغة الافتراضية المعينة حاليًا.

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

 import { registerLocale, setDefaultLocale } from 'react-datepicker'; import es from 'date-fns/locale/es'; registerLocale('es', es) 

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

في حالة أخرى، لتغيير الإعدادات المحلية، نحتاج في المقام الأول إلى تغيير رمز الإعدادات المحلية أو باستخدام تدويل date-fns حتى يمكن دعم مراجعة التعليمات البرمجية.

 setDefaultLocale('es') 

تحديد النطاق الزمني للتقويم في Datepicker.

سوف نتعلم كيفية تنفيذ وظيفة النطاق باستخدام التاريخ و خاصية التاريخ الأقصى في هذه الخطوة. للقيام بذلك، نقوم باستيراد addDays AP أنا من date-fns مكتبة إلى الجزء العلوي من مكون رد الفعل لدينا. سيضيف عددًا محددًا من الأيام إلى التاريخ المحدد لتعيين النطاق.

 import addDays from 'date-fns/addDays' 

ال أضف أيام () عادة ما تأخذ الطريقة معلمتين:

تاريخ: التاريخ الذي يحتاج إلى تحديث.

كمية: يجب تضمين كمية كبيرة من الأيام.

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

 render() { return ( Show Date ); } 

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

 import React, { Component } from 'react'; import DatePicker from 'react-datepicker'; import addDays from 'date-fns/addDays' import 'react-datepicker/dist/react-datepicker.css'; import 'bootstrap/dist/css/bootstrap.min.css'; class App extends Component { constructor (props) { super(props) this.state = { startDate: new Date() }; this.handleChange = this.handleChange.bind(this); this.onFormSubmit = this.onFormSubmit.bind(this); } handleChange(date) { this.setState({ startDate: date }) } onFormSubmit(e) { e.preventDefault(); console.log(this.state.startDate) } render() { return ( Show Date ); } } export default App; 

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

javatpoint java

في الخطوة التالية، سنحفظ قيمة حالتنا ونحدد كيفية عمل كل مقبض. الفكرة الرئيسية هي تنفيذها ببساطة عن طريق إنشاء حالة لكل منها تحقق في و الدفع التاريخ مع القيم المحددة وحفظ البيانات هناك. الفرق الوحيد يكمن في minDate طريقة مكون السحب، حيث أنها تعتمد فقط على مكون تسجيل الوصول. وبالتالي، مع ضمان ضبط كل شيء من حيث القيم ليس قبل ذلك وليس بعده، يمكننا الآن بسهولة تحديد التواريخ وتحديد تسجيل المغادرة.

خاتمة

في هذا البرنامج التعليمي، تمكنا من متابعة دليل بسيط خطوة بخطوة حول إنشاء مكون React Datepicker مخصص والذي يمكن استخدامه بسهولة كبديل للمكون الأصلي منتقي التاريخ HTML5 عناصر الإدخال. لقد تعلمنا كيفية إعداد تطبيق React على الأولوية لأن عرض مكونات React قد يبدو معقدًا للمبتدئين، لذا فإن إعداد التبعيات سيكون دائمًا مفضلاً للمبتدئين. لقد صادفنا أيضًا أمثلة مختلفة لإنشاء مفهوم واضح تمامًا لاستخدام مكونات Datepicker في تطبيقنا. لقد تعلمنا أيضًا عن عملية تحديد منتقي التاريخ بحيث لا تسبب عملية تحديد التاريخ مشكلة إذا تم تحديده لمدة محددة في التقويم.

على الرغم من أن منتقي التاريخ المخصص الذي تم إنشاؤه في هذا البرنامج التعليمي يعمل كما هو متوقع، إلا أنه لا يتوافق مع كافة المتطلبات المتقدمة لعنصر منتقي التاريخ. يمكن إجراء المزيد من التحسينات، مثل تنفيذ الحد الأقصى والحد الأدنى عبر الدعائم، وتبديل نوع الإدخال من النص إلى التاريخ، وإنشاء تحسين أفضل لإمكانية الوصول. يمكننا أيضًا تطوير أساليب تصميم لمنتقي التاريخ الذي قمنا بتنفيذه في هذا البرنامج التعليمي عن طريق استيراد حزم Bootstrap وإضافة تصميم مخصص وخصائص التمرير لجعله يبدو أكثر جودة.