Disabled values
Enforcing validation is essential to a great UX. First make sure to have the min & max values right and then work your way through disabled values.
Depending on your situation, you have two options:
- Set invalid - set the invalids through the
invalidoption. - Set valid - set the valids through the
validoption.
Both the invalid and valid options support the following:
- Exact dates - Passing exact values like:
'2020-05-20'will disable/enable the specific day - Date ranges - Passing
startandendvalue pairs will disable/enable specific days and/or times that fall into that range - Recurring dates - Passing recurrence rules as objects or in RRULE string format will be parsed. For more information on recurrence check out the rule generator
Exact dates and the start/end pairs can be passed as JS date objects, ISO date strings or Moment.js objects. Having invalids set up correctly not just enhances the UX, but improves performance.
Demo
Do you want to
?
Disable exact dates
Disable recurring dates
Disable one or more date ranges
Disable exact times
Disable time ranges
Disable exact times
Disable time ranges
Disable exact times
Disable time ranges
jsx<Datepicker
controls={['date ']}
invalid={[] }
valid={[] }
/> JSXTSX
import { Datepicker, setOptions } from '@mobiscroll/react';
import { useMemo } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const myInvalid = useMemo(
() => [
'2020-02-12',
'2020-05-20',
{
recurring: {
repeat: 'weekly',
weekDays: 'SA,SU',
},
},
{
recurring: {
repeat: 'yearly',
day: 24,
month: 12,
},
},
{
recurring: {
repeat: 'yearly',
day: 31,
month: 12,
},
},
{
recurring: {
repeat: 'monthly',
day: 1,
},
},
{
recurring: {
repeat: 'monthly',
day: -1,
},
},
{
start: '2020-03-15',
end: '2020-03-30',
},
{
start: '2020-07-05',
end: '2020-08-20',
},
],
[],
);
return (
<div>
<Datepicker controls={['date']} display="inline" invalid={myInvalid} />
</div>
);
}
export default App;
import { Datepicker, setOptions } from '@mobiscroll/react';
import { FC, useMemo } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => {
const myInvalid = useMemo(
() => [
'2020-02-12',
'2020-05-20',
{
recurring: {
repeat: 'weekly',
weekDays: 'SA,SU',
},
},
{
recurring: {
repeat: 'yearly',
day: 24,
month: 12,
},
},
{
recurring: {
repeat: 'yearly',
day: 31,
month: 12,
},
},
{
recurring: {
repeat: 'monthly',
day: 1,
},
},
{
recurring: {
repeat: 'monthly',
day: -1,
},
},
{
start: '2020-03-15',
end: '2020-03-30',
},
{
start: '2020-07-05',
end: '2020-08-20',
},
],
[],
);
return (
<div>
<Datepicker controls={['date']} display="inline" invalid={myInvalid} />
</div>
);
};
export default App;