MultiDatePicker
This widget allows date selection presented across multiple date pickers. The API
matches closely to a DatePicker since the only meaningful difference in functionality is the use of a carousel to
present multiple months at the same time. This widget is a part of DateRangePicker.
Configs
131
Configs
131Common
Other
A function (or the name of a function) which creates content in, and may mutate a day cell element.
See cellRenderer.
| Parameter | Type | Description |
|---|---|---|
renderData | Object | |
renderData.cell | HTMLElement | The header element |
renderData.date | Date | The date for the cell |
renderData.day | Number | The day for the cell ( |
renderData.rowIndex | Number[] | The row index, 0 to month row count |
renderData.row | HTMLElement | The row element encapsulating the week which the cell is a part of |
renderData.source | CalendarPanel | The widget being rendered |
renderData.cellIndex | Number[] | The cell index in the whole panel. May be from |
renderData.columnIndex | Number[] | The column index, |
renderData.visibleColumnIndex | Number[] | The visible column index taking hidden non-working days into account |
The initially selected date.
The configuration defaults for all date pickers in the carousel.
A function (or the name of a function) which creates content in, and may mutate a day header element.
See headerRenderer.
| Parameter | Type | Description |
|---|---|---|
renderData | Object | |
renderData.cell | HTMLElement | The header element |
renderData.day | Number | The day number conforming to the specified weekStartDay. Will
be in the range |
renderData.weekDay | Number | The canonical day number where Monday is 0 and Sunday is |
The maximum selectable date. Selection of and navigation to dates after this date will not be possible.
The minimum selectable date. Selection of and navigation to dates prior to this date will not be possible.
Configure as true to enable selecting multiple discontiguous date ranges using click and Shift+click to
create ranges and Ctrl+click to select/deselect individual dates.
Configure as 'range' to enable selecting a single date range by selecting a start and end date. Hold
"SHIFT" button to select date range. Ctrl+click may add or remove dates to/from either end of the range.
Set to false to not allow multiple date selection.
The current date range selection as an array of two Date objects.
A function (or the name of a function) which creates content in, and may mutate the week cell element at the start of a week row.
See weekRenderer.
| Parameter | Type | Description |
|---|---|---|
renderData | Object | |
renderData.cell | HTMLElement | The header element |
renderData.week | Number[] | An array containing |
The week start day, 0 meaning Sunday, 6 meaning Saturday. Defaults to weekStartDay.
Content
CSS
DOM
Float & align
Layout
misc
Misc
Scrolling
Properties
108
Properties
108Class hierarchy
Other
The current date range selection as an array of two Date objects.
CSS
DOM
Layout
Misc
State
Widget hierarchy
Functions
81
Functions
81Other
Ensures that the given slot date is visible, scrolling if necessary to make it so.
| Parameter | Type | Description |
|---|---|---|
options | Object | Options to configure which date should be visible and how to scroll if necessary. |
options.date | Date | The date to make visible. |
options.index | Number | The index of the slot (i.e., the month offset). This property is used by the
base-class ( |
options.animation | Boolean | Pass |
Configuration
Events
Misc
Widget hierarchy
Events
22
Events
22Fires when a date or date range is selected. If multiSelect is specified, this will fire upon deselection and selection of dates.
// Adding a listener using the "on" method
multiDatePicker.on('selectionChange', ({ selection, userAction }) => {
});| Parameter | Type | Description |
|---|---|---|
selection | Date[] | The selected date. If multiSelect is specified this may be a two element array specifying start and end dates. |
userAction | Boolean | This will be |
Event handlers
22
Event handlers
22Called when a date or date range is selected. If multiSelect is specified, this will fire upon deselection and selection of dates.
new MultiDatePicker({
onSelectionChange({ selection, userAction }) {
}
});| Parameter | Type | Description |
|---|---|---|
selection | Date[] | The selected date. If multiSelect is specified this may be a two element array specifying start and end dates. |
userAction | Boolean | This will be |