react datepicker

رد فعل تاريخ رد فعل

مكون DatePicker بسيط وقابل لإعادة الاستخدام لـ React (Demo)

تثبيت

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

 npm install react-datepicker --save

أو عن طريق الغزل:

 yarn add react-datepicker

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

 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 (
    < DatePicker selected = { startDate } onChange = { ( date ) => setStartDate ( date ) } />
  ) ;
} ; 

إعدادات

يمكن وصف الاستخدام الأساسي لـ DatePicker بـ:

 < DatePicker selected = { startdate } onChange = { ( date ) => setStartDate ( date ) } />

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

 < DatePicker
  selected = { date }
  onSelect = { handleDateSelect } //when day is clicked
  onChange = { handleDateChange } //only when value has changed
/>

قد يكون معالج onClickOutside مفيدًا في إغلاق DatePicker في الوضع inline

انظر هنا للحصول على قائمة كاملة من الدعائم التي قد يتم تمريرها إلى المكون. يتم تقديم أمثلة على الموقع الرئيسي.

منتقي الوقت

يمكنك أيضًا تضمين منتقي الوقت عن طريق إضافة دعامة العرض

 < DatePicker
  selected = { date }
  onChange = { handleDateChange }
  showTimeSelect
  dateFormat = "Pp"
/>

سيتم عرض الأوقات على فترات مدتها 30 دقيقة بشكل افتراضي (الافتراضي القابل للتكوين عبر Prop TimeIntervals)

يتم تقديم المزيد من الأمثلة على كيفية استخدام منتقي الوقت على الموقع الرئيسي

التوطين

يعتمد منتقي التاريخ في تدويل التاريخ لتوطين مكونات العرض الخاصة به. بشكل افتراضي ، سيستخدم منتقي التاريخ المكان على المستوى العالمي ، وهو اللغة الإنجليزية. المقدمة هي 3 طرق مساعد لتعيين اللغة:

• Recordlocale (سلسلة ، كائن): يقوم بتحميل كائن محلي مستورد من تاريخ التاريخ
• setDefaultLocale (سلسلة): تعيين لغة مسجلة كأحد حالات DatePicker
• getDefaultLocale : إرجاع سلسلة توضح اللغة الافتراضية المحددة حاليًا

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

< DatePicker
  locale = "es"
/ >

يمكن تغيير الأماكن بالطريقة التالية:

• عالميًا - setDefaultLocale('es');

التوافق

رد فعل

نحن نحاول دائمًا البقاء متوافقًا مع أحدث إصدار من React. لا يمكننا دعم جميع الإصدارات القديمة من React.

أحدث الإصدارات المتوافقة:

• رد فعل 16 أو الأحدث: React-Datepicker v2.9.4 وأحدث
• React 15.5: React-Datepicker v2.9.3
• React 15.4.1: احتياجات React-Datepicker v0.40.0 ، لن يعمل الأحدث (بسبب تبعيات React-onClickoutside)
• React 0.14 أو أحدث: كل ذلك أعلاه React-Datepicker V0.13.0
• React 0.13: React-Datepicker V0.13.0
• Pre React 0.13: React-Datepicker V0.6.2

لحظة

حتى الإصدار 1.8.0 ، كانت هذه الحزمة تستخدم Moment.js. بدء V2.0.0 ، انتقلنا إلى استخدام date-fns ، والذي يستخدم كائنات التاريخ الأصلي ، لتقليل حجم الحزمة. إذا كنت تتحول من 1.8.0 إلى 2.0.0 أو أعلى ، فيرجى الاطلاع على المثال المحدث أعلاه لموقع Argraments لمواقع الأمثلة.

دعم المتصفح

يتوافق منتقي التاريخ مع أحدث إصدارات Chrome و Firefox و IE10+.

لسوء الحظ ، من الصعب دعم المتصفحات القديمة مع الحفاظ على قدرتنا على تطوير ميزات جديدة في المستقبل. بالنسبة لدعم IE9 ، من المعروف أن هناك حاجة إلى polyfill قائمة الفئة ، ولكن هذا قد يتغير أو ينكسر في أي وقت في المستقبل.

التنمية المحلية

يحتوي الفرع main على أحدث إصدار من مكون DatePicker.

لبدء التنمية المحلية:

1. تشغيل yarn link من جذر المشروع
2. قم بتشغيل cd docs-site && yarn link react-datepicker
3. قم بتشغيل yarn install من جذر المشروع
4. قم بتشغيل yarn build من Project Root
5. قم بتشغيل yarn start من جذر المشروع

تبدأ الخطوة الأخيرة تطبيق الوثائق كخادم ويب بسيط على http: // localhost: 3000.

يمكنك تشغيل yarn test لتنفيذ جناح الاختبار والمضادات. لمساعدتك في تطوير المكون ، قمنا بإعداد بعض الاختبارات التي تغطي الوظائف الأساسية (يمكن العثور عليها في /tests ). على الرغم من أننا معجبين كبير في الاختبار ، فإن هذا يغطي قطعة صغيرة فقط من المكون. نوصي بشدة بإضافة اختبارات عند إضافة وظائف جديدة.

يرجى الرجوع إلى ملف CONTRIBUTING.md لمزيد من التفاصيل حول الإعداد.

الأمثلة

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

إمكانية الوصول

دعم لوحة المفاتيح

• اليسار : انتقل إلى اليوم السابق.
• اليمين : انتقل إلى اليوم التالي.
• UP : انتقل إلى الأسبوع السابق.
• أسفل : انتقل إلى الأسبوع المقبل.
• PGUP : انتقل إلى الشهر السابق.
• Shift+PGUP : انتقل إلى نفس اليوم وشهر العام السابق. إذا لم يكن ذلك اليوم موجودًا ، فإن التحرك يركز على اليوم الأخير من الشهر.
• PGDN : انتقل إلى الشهر التالي.
• Shift+PGDN : انتقل إلى نفس اليوم وشهر العام المقبل. إذا لم يكن ذلك اليوم موجودًا ، فإن التحرك يركز على اليوم الأخير من الشهر.
• الصفحة الرئيسية : انتقل إلى اليوم الأول (مثل الأحد) من الأسبوع الحالي.
• النهاية : انتقل إلى اليوم الأخير (على سبيل المثال السبت) من الأسبوع الحالي.
• أدخل/ESC/علامة التبويب : أغلق التقويم. (أدخل ومكالمات ESC PreventDefault)

للمنتقي الشهر

• اليسار : انتقل إلى الشهر السابق.
• اليمين : انتقل إلى الشهر المقبل.
• أدخل : حدد التاريخ وأغلق التقويم

رخصة

حقوق الطبع والنشر (C) 2014-2024 Hackerone Inc. والمساهمين الفرديين. مرخصة بموجب ترخيص معهد ماساتشوستس للتكنولوجيا ، راجع ترخيص الترخيص الكامل.