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