دیت پیکر چند منظوره ری اکت

جدول پراپ های پیشفرض

پراپ	حالت	توضیحات
position	String	current position of the plugin
nodes	Object	to determine if there is another plugin around the current plugin
Calendar	HTML Div Element
DatePicker	HTML Div Element
calendarProps	Object
datePickerProps	Object
state	Object	the state of the calendar
setState	Function
registerListener	Function
handleChange	Function	if you want to trigger a change event
handlePropsChange	Function	if you want to trigger a props change event
handleFocusedDate	Function	if you want to trigger a focus change event

Calendar و DatePicker

حاوی عناصر HTML تقویم و datepicker است ، هر یک از آنها به طور جداگانه در ref خود ذخیره می شوند.

به عنوان مثال ، باتوجه به اینکه فانکشن closeCalendar در ref دیت پیکر قرار دارد. می توانید در پلاگین خود، از آن برای بستن تقویم استفاده کنید.

فقط توجه داشته باشید که اگر کاربر به جای DatePicker از افزونه شما در Calendar استفاده کند ، مقادیر DatePicker و datePickerProps تعریف نشده می شوند.

import React from "react";
import DatePicker from "react-multi-date-picker";

function MyPlugin({ DatePicker }) {
  return (
    <div>
      <button
        style={{ margin: "5px" }}
        disabled={!DatePicker}
        onClick={() => DatePicker.closeCalendar()}
      >
        Close
      </button>
    </div>
  );
}

export default function Example() {
  return (
    <DatePicker 
      plugins={[
        <MyPlugin position="bottom" />
      ]} 
    />
  )
}

calendarProps و datePickerProps

نکته ای که در مورد این دو ویژگی وجود دارد این است که مقدار datePickerProps همیشه بر مقدار CalendarProps اولویت دارد. زیرا DatePicker برخی از پراپرتی های تقویم را تغییر می دهد.

برای تعیین اینکه آیا شما باید از CalendarProps استفاده کنید یا datePickerProps ، بهتر است مثال زیر را دنبال کنید:

function MyPlugin({ datePickerProps, calendarProps }) {
  const props = datePickerProps || calendarProps

  ...
}

پراپرتی State

آبجکتی که حاوی داده های مورد نیاز تقویم است.

خصوصیات این object در جدول زیر نوشته شده است.

توجه داشته باشید که type هیچکدام از این پراپرتی ها نباید تغییر کند.

پراپرتی	حالت	توضیحات
date	DateObject	The date displayed by the calendar
selectedDate	DateObject or DateObject[]	user-selected date(s)
multiple	Boolean	Specifies whether it is in multiple or range mode. If you want to change the value of any of these properties to true, you must change the value of the selectedDate from DateObject to DateObject[].
range	Boolean
onlyMonthPicker	Boolean
onlyYearPicker	Boolean
initialValue	-
value	-
focused	DateObject or undefined	the date that is focused by the user
calendar	Object Calendar
locale	Object Locale
format	String
year	Number
today	DateObject	changing this value interferes with calendar performance