Multi Date Picker
Overview
Multi Date Picker is a flexible and highly customizable date picker component. It enables users to select multiple dates or date ranges, offering a wide array of customization options.
https://www.npmjs.com/package/react-multi-date-picker
you can refer the multi date picker sample for example
Documentation
React Multi Date Picker is a flexible and highly customizable date picker component. It enables users to select multiple dates or date ranges, offering a wide array of customization options.
https://www.npmjs.com/package/react-multi-date-picker
Features
- Value: The value of the date passed into the component.
- Placeholder: Placeholder.
- Disabled: disabled.
- Ready Only: read-only.
- Input Class: Input Class for styling.
- Editable: Input of manual date.
Display and Format
- Format: format of the date.
- Date Separator: default is ','.
- Display Full Year: Display Full Year
- Highlight Today: Highlight Today
Date Selection
- Min Date: Min date for selection
- Max Date: Max date for selection
- On Open Pick New Date: On open pick new date.
Multiple Dates and Range Selection
- Multiple: Set to true when range is true.
- Range: Range selection
- Range Hover: Highlight the range when hovering the dates
- Multiple Range Separator: Multiple Range Separator.
Month and Year Picker
- Only Month Picker: Only Month Picker
- Only Year Picker: Only Year Picker
- No. of Months: No. of Months
- Disable Year Picker: Disable Year Picker
- Disable Month Picker: Disable Month Picker
- Months: Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sept,Oct,Nov,Dec.
Week and Day Picker
- Week Picker: Week Picker
- Disable Day Picker: Disable Day Picker
- Week days: sun,mon,tue,wed,thur,fri,sat
- Week Start Day Index: change the start day of the week.For example, if you want the start day of the week to be Monday, you should set the weekStartDayIndex value to 1.The value of weekStartDayIndex must be a number between 0 and 6.
- Show Other Days: Show Other Days
- Display Week Numbers: Display Week Numbers
- week Number: week Number Header Name
- Sort: Sort the selected dates
Current Date
- Year: on opening muti date picker which Year needs to be displayed.
- Month: on opening muti date picker which Month needs to be displayed
- Day: on opening muti date picker which Day needs to be displayed.
Header
- Header Month Year Separator: Header Month Year Separator
- Hide Year From Header: Hide Year From Header
- Hide Month From Header: Hide Month From Header
- Hide Week Days From Header: Hide Week Days From Header.
Plugin
- Date Panel: display Date Panel.
- Time Picker: display Time Picker.
- Date Picker Header: display Date Picker Header.
- highlight Week End: highlight Week End
- highlight Week End Array: Which week (Array) needs to be highlighted
- Tool bar: display Tool bar.
Demo URL:
https://multi-datepicker-react-sandbox.mxapps.io/login.html?profile=Responsive
Credentials:
demo_administrator
Le1ZiYG5LFtv
Dependencies:
• Mendix modeler 9.12.4.
Issues, suggestions and feature requests
https://github.com/bharathidas/MultiDatePicker/issues