mui-multi-date-selector v1.0.0
mui-multi-date-selector
Installation
npm i mui-multi-date-selector
Examples
You can use the component without any props, which just will result in rendering an uncontrolled component
import MuiMultiDateSelector from "mui-multi-date-selector";
function App(): React.JSX.Element {
return <MuiMultiDateSelector />;
}
for a more practical usage you might need to pass at least an on-change function to the component to listen to changes on selected dates, for example onSelectedDatesChange
which passes a "snapshot" of the current selected dates
import MuiMultiDateSelector from "mui-multi-date-selector";
function App(): React.JSX.Element {
return <MuiMultiDateSelector onSelectedDatesChange={someOnChangeListener} />;
}
for the full documentation, check documentation section
Documentation
In addition to the original DateCalendar
(typed as DateCalendarProps<Date>
) props, here are the custom props that can be used by MuiMultiDateSelector
defaultDates
type: Date[] | undefined
\
required: false
\
initially selected dates
onSelectedDatesChange
type: (Date[]) -> void
\
required: false
\
selected dates listener, if set will be fired on any addition to or removal from selected dates list, the argument it takes is a snapshot of the currently selected dated, if you need to differentiate between select and unselect events use onDateSelected
and/or onDateUnselected
onDateSelected
type: (Date) -> void
\
required: false
\
triggered when a date is selected with that date passed as an argument
onDateUnselected
type: (Date) -> void
\
required: false
\
triggered when a date is unselected with that date passed as an argument
Style
You can apply your own themes and customize the selector just as you would customize the style and theming of DateCalendar
(or any other MUI component).
Here is how the component would look out-of-the-box on a light theme