الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل
chakra dayzed datepicker

منتقي تاريخ شقرا بسيط يعتمد على Dayzed.

يستخدم كل مكون فردي واجهة مستخدم Chakra. لذلك يجب أن تحترم جميع تكوينات Chakra UI دون مشكلة.

يجب أن يستخدم المكون نفسه بعض مكتبة date

نوصي بشدة بنسخ/لصق الكود المصدري من /src لتخصيصه كما تريد.

تثبيت التبعية

Npm 

npm i date-fns dayzed
npm i chakra-dayzed-datepicker

غزل: 

yarn add date-fns dayzed
yarn add chakra-dayzed-datepicker

الاستخدام الأساسي

أعزب

  استيراد { SingleDatepicker } من "chakra-dayzed-datepicker"؛

  const [date, setDate] = useState(new Date());

يتراوح:

لاحظ أن هذه القائمة سيكون لها قيمة واحدة أثناء عملية الاختيار. لن يعمل نظامك إذا حاولت التحكم في ذلك مباشرة كـ [startDate, endDate] لأننا سنحاول تعيين selectedDates على [intermediateSelection] ويكون طول selectedDates الناتجة ذا معنى لمنتقي التاريخ.

  استيراد { RangeDatepicker } من "chakra-dayzed-datepicker"؛

    const [selectedDates, setSelectedDates] = useState([new Date(), new Date()]);

تكوينات الدعائم:

يمتد dateNavBtnProps من ButtonProps of Chakra-UI، مما يسمح لك بتجاوز السلوك الافتراضي كيفما تريد طالما أنه مدعوم من Chakra-UI.

 يومOfMonthBtnProps = {
  الافتراضيBtnProps,
  إينرانجيبتنبروب,
  محددBtnProps,
  اليومBtnProps}

يسمح لك dayOfMonthBtnProps بتخصيص نمط تاريخ btn بناءً على الحالة.
أسبقية النمط: default < isInRange < seleted < today .

قد يكون popoverCompProps مفيدًا عندما تريد إعداد بعض الأنماط البسيطة مثل لون النص عالميًا

 بوبوفركومبروببس = {
  بوبوفركونتينتبروبس,
  بوبوفربوديبروبس}

لتلخيصها:

  propsConfigs={{dateNavBtnProps: {},dayOfMonthBtnProps: { defaultBtnProps: {}, isInRangeBtnProps: {}, SelectedBtnProps: {}, todayBtnProps: {}},inputProps: {},popoverCompProps: { popoverContentProps: {}، popoverBodyProps: {}}،calendarPanelProps: { WrapperProps: {}، contentProps: {}، headerProps: {}، DividerProps: {}،}،weekdayLabelProps: {}، dateHeadingProps: {}
  }}


مثال:

  propsConfigs={{dateNavBtnProps: { colorScheme: "blue"، البديل: "outline"},dayOfMonthBtnProps: { defaultBtnProps: {borderColor: "red.300"،_hover: { الخلفية: 'blue.400'،} }، isInRangeBtnProps: {اللون: "أصفر"، }، SelectedBtnProps: {background: "blue.200"، اللون: "أخضر"، }، todayBtnProps: {background: "teal.400"، }}،inputProps: { size: "sm"}،popoverCompProps: { popoverContentProps: {background: "gray.700" "،اللون: "أبيض"، }،}،calendarPanelProps: { WrapperProps: {borderColor: 'green'، }، contentProps: {borderWidth: 0, }، headerProps: {padding: '5px'، }، DividerProps: {display: "none"، }،}،weekdayLabelProps: {fontWeight: 'normal'}،dateHeadingProps: {fontWeight: 'semibold '}
  }}

التكوينات:

التكوينات غير المتعلقة بالشاكرا: 

  configs={{
    dateFormat: 'yyyy-MM-dd',
    dayNames: 'abcdefg'.split(''), // length of 7
    monthNames: 'ABCDEFGHIJKL'.split(''), // length of 12
    firstDayOfWeek: 2, // default is 0, the dayNames[0], which is Sunday if you don't specify your own dayNames,
  }}

الدعائم الأخرى:

اسم واحد/نطاق يكتب القيمة الافتراضية وصف
اسم كلاهما خيط غير محدد سمة الاسم لعنصر
usePortal كلاهما منطقية غير محدد لمنع الأنماط الأصلية من قص المحتوى أو إخفائه
defaultIsOpen كلاهما منطقية خطأ شنيع افتح لوحة التاريخ في البداية
CloseOnSelect كلاهما منطقية حقيقي أغلق لوحة التاريخ عند التحديد الكامل
minDate كلاهما تاريخ غير محدد الحد الأدنى للتاريخ
التاريخ الأقصى كلاهما تاريخ غير محدد الحد الأقصى للتاريخ
disableDates أعزب تعيين غير محدد لمنتقي التاريخ الفردي فقط، يستخدم startOfDay للمقارنة، على سبيل المثال، disabledDates={new Set([startOfDay(new Date()).getTime()}

للإصدار < [email protected] :
يمتد dayOfMonthBtnProps من ButtonProps ويحتوي فقط على دعم selectedBg ،

  dayOfMonthBtnProps: {borderColor: "red.300"،selectedBg: "blue.200"،_hover: { bg: 'blue.400'،}
  },
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل