Start-end selection
To enable range selection set the select option to range.
The microcopy for rangeStartLabel and rangeEndLabel can be easily overridden. For flight booking "Outbound" and "Return" makes sense while for accommodation booking "Check in" and "Check out" might be more appropriate.
Besides invalidating selection that is before and after a specific date, the minimum and maximum allowed length of a range selection can be enforced through the minRange and maxRange options.
Dynamically switching between single, multiple or range select can be done with option changes.
Looking for more range picker? Learn how to customize range selection →
Demo
Customize the start & end labels
Override localized labels with custom text
Show
for the start label
Show
for the end label
Control the minimum and maximum length of the selection
milliseconds
(which is
0 day(s)
2 hour(s)
and 30 minute(s))
milliseconds
(which is
0 day(s)
2 hour(s)
and 30 minute(s))
<Datepicker
controls={['date ']}
select="range"
showRangeLabels={true }
rangeStartLabel="Outbound "
rangeEndLabel="Return "
minRange={3 }
maxRange={10 }
/>JSXTSX
import { Datepicker, setOptions } from '@mobiscroll/react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
return (
<div>
<Datepicker
controls={['datetime']}
select="range"
display="inline"
showRangeLabels={true}
rangeStartLabel="Outbound"
rangeEndLabel="Return"
minRange={3}
maxRange={10}
/>
</div>
);
}
export default App;
import { Datepicker, setOptions } from '@mobiscroll/react';
import { FC } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => (
<div>
<Datepicker
controls={['datetime']}
select="range"
display="inline"
showRangeLabels={true}
rangeStartLabel="Outbound"
rangeEndLabel="Return"
minRange={3}
maxRange={10}
/>
</div>
);
export default App;