Min & Max Date Restrictions
Configuring minimum and maximum selectable values is great for reducing mistakes. Help people by limiting the selections for the task at hand. Use the min and max options to restrict the selection. Setting the values will disable dates/times earlier than min and dates/times that come after max.
By default these options are empty and the date picker supports infinite navigation, while the time picker has all 24 hours/60 minutes/... available for selection. Values can be passed as JS date objects, ISO date strings or Moment.js objects.
Looking to invalidate more dates/times? Discover how to disable specific values →
Demo
Set min/max values for
Set an exact date
Or set a dynamically calculated date
Set an exact date
const now = new Date();
<Datepicker
controls={['calendar ']}
min="
max="
max={new Date(now.getFullYear() - 18, now.getMonth(), now.getDate())}
/>JSXTSX
import { Datepicker, setOptions } from '@mobiscroll/react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
return (
<div>
<Datepicker display="inline" min="1920-01-01" max="2050-01-01" />
<Datepicker controls={['calendar', 'time']} display="inline" min="2000-01-01T12:00" max="2050-01-01T12:00" />
</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" min="1920-01-01" max="2050-01-01" />
<Datepicker controls={['calendar', 'time']} display="inline" min="2000-01-01T12:00" max="2050-01-01T12:00" />
</div>
);
export default App;