Multi-Date Selection
To enable multiple selection set the selectMultiple option to true.
The selectMax option limits how many values can be selected.
To customize the header you can pass a headerText or turn selectCounter on to display a localized text with the number of dates selected.
Dynamically switching between single, multiple or range select can be done with option changes.
Demo
Customize the selection
Select a maximum of
days
Customize the header
Show a selection counter in the header
Show
in the header
<Datepicker
controls={['calendar']}
selectMultiple={true}
selectMax={1 }
selectCounter={true}
headerText="
/>JSXTSX
import { Datepicker, setOptions } from '@mobiscroll/react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
return (
<div>
<Datepicker display="inline" selectMultiple={true} />
<Datepicker display="inline" selectMultiple={true} selectMax={5} headerText="Pick up to 5 days" />
<Datepicker display="inline" selectMultiple={true} selectCounter={true} />
</div>
);
}
export default App;
import { Datepicker, setOptions } from '@mobiscroll/react';
import { FC } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => (
<div>
<Datepicker controls={['calendar']} display="inline" selectMultiple={true} />
<Datepicker controls={['calendar']} display="inline" selectMultiple={true} selectMax={5} headerText="Pick up to 5 days" />
<Datepicker controls={['calendar']} display="inline" selectMultiple={true} selectCounter={true} />
</div>
);
export default App;