Props
This is a list of props that are available in React-Calendar-DateTime-Picker:
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| onChange | func | true | - | A function that returns an object of selected date/dates. |
| initValue | Day | null | null | You can set a default value for your date using this property. | |
| type | string | single | You can choose the selection type that you need to use. There exist 3 types: "single", "range", "multi" | |
| local | string | en | This date picker supports both Gregorian and Jalali calenders.To select Gregorian calendar you have to set "local" to "en" and to "fa" for Jalali. | |
| autoClose | boolean | true | Calendar modal close automatically, by set autoClose to false you can keep calender modal open even after selecting date(auto closing just works on single and range type) | |
| withTime | boolean | false | Should you need to use time in your date picker you can set this prop to true.This prop works only in single and range types. | |
| showTimeInput | boolean | false | Helps you to show time in input date picker | |
| showWeekend | boolean | false | Marks weekends by changing the color. | |
| clearBtn | boolean | false | Add a button to your input to clear you calendar initial date/dates. | |
| isRequired | boolean | false | This prop makes your input as a required field in the form validation | |
| todayBtn | boolean | false | A button to move fast to the date of today in the calendar. | |
| onCalenderChange | func | A callback that runs when the calendar value is changed, to use this feature you should pass initValue | ||
| onCalenderShow | func | A callback that runs when the calendar opens | ||
| onCalenderHide | func | A callback that runs when the calendar closes | ||
| maxDate | Day | You can set this prop to limit the maximum date that the user can select.Periods partially overlapped by maxDate will also be selectable, although React-calendar-dateTime-picker will ensure that no later date is selected. | ||
| minDate | Day | You can set this prop to limit the minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-calendar-dateTime-picker will ensure that no earlier date is selected. | ||
| disabledDates | Day[] | A list of dates that you want the user not to select. | ||
| isDisabled | boolean | false | Use to disable the calendar input | |
| inputId | string | Assign an id to calendar input | ||
| yearListStyle | string | grid | Use to change year item list style(accepted value: grid, list) |