Min Max Length
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.
This form of validation is easy to understand and reduces erroneous entries.
Demo
Customize
Date only calendar
Date only scroller
Date & time picker
Time picker
Control the minimum and maximum length of the selection
(which is
0 day(s)
2 hour(s)
and 30 minute(s))
(which is
3 day(s)
11 hour(s)
and 20 minute(s))
<Datepicker
controls={['calendar ']}
select="range"
minRange={3 }
maxRange={10 }
/>JSXTSX
import { Datepicker, setOptions } from '@mobiscroll/react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
return (
<div>
<Datepicker controls={['calendar']} select="range" display="inline" minRange={3} maxRange={10} />
<Datepicker controls={['date']} select="range" display="inline" 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={['calendar']} select="range" display="inline" minRange={3} maxRange={10} />
<Datepicker controls={['date']} select="range" display="inline" minRange={3} maxRange={10} />
</div>
);
export default App;