Presets
The selected range can be adjusted by the user or you can programmatically set the start and end.
This is especially useful and effective when using the range for filtering and you'd like to offer predefined ranges like Yesterday, Today, Last week and so on. Setting the values can be done from something as simple as a button click.
Demo
Setting today
jsxconst now = new Date();
const [myValue, setValue] = React.useState(null);
const setToday = () => {
setValue([now, now]);
};
<mobiscroll.Button onClick={setToday}>Today</mobiscroll.Button>
<Datepicker
controls={['calendar']}
select="range"
value={myValue}
/>
Setting yesterday
jsxconst now = new Date();
const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
const [myValue, setValue] = React.useState(null);
const setYesterday = () => {
setValue([yesterday, yesterday]);
};
<mobiscroll.Button onClick={setYesterday}>Yesterday</mobiscroll.Button>
<Datepicker
controls={['calendar']}
select="range"
value={myValue}
/>
Setting this week
jsxconst now = new Date();
const firstday = new Date(now.setDate(now.getDate() - now.getDay()));
const lastday = new Date(now.setDate(now.getDate() - now.getDay() + 6));
const [myValue, setValue] = React.useState(null);
const setWeek = () => {
setValue([firstday, lastday]);
};
<mobiscroll.Button onClick={setWeek}>This week</mobiscroll.Button>
<Datepicker
controls={['calendar']}
select="range"
value={myValue}
/>
Setting last month
jsxconst now = new Date();
const firstday = new Date(now.getFullYear(), now.getMonth() - 1, 1);
const lastday = new Date(now.getFullYear(), now.getMonth(), 0);
const [myValue, setValue] = React.useState(null);
const setMonth = () => {
setValue([firstday, lastday]);
};
<mobiscroll.Button onClick={setMonth}>Last month</mobiscroll.Button>
<Datepicker
controls={['calendar']}
select="range"
value={myValue}
/>
Clear the selection with a simple click
jsxconst [myValue, setValue] = React.useState(null);
const clear = () => {
setValue(null);
};
<mobiscroll.Button onClick={clear}>Clear</mobiscroll.Button>
<Datepicker
controls={['calendar']}
select="range"
value={myValue}
/>
JSXTSXCSS
import { Button, Datepicker, Page, setOptions, Toast } from '@mobiscroll/react';
import { useCallback, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const now = new Date();
const curr = new Date();
const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
const startWeek = new Date(curr.setDate(curr.getDate() - curr.getDay()));
const endWeek = new Date(curr.setDate(curr.getDate() - curr.getDay() + 6));
const startMonth = new Date(curr.getFullYear(), curr.getMonth() - 1, 1);
const endMonth = new Date(curr.getFullYear(), curr.getMonth(), 0);
function App() {
const [value, setValue] = useState(null);
const [isOpen, setOpen] = useState(false);
const [toastMsg, setMsg] = useState('');
const openToast = useCallback((message) => {
setMsg(message);
setOpen(true);
}, []);
const handleCloseToast = useCallback(() => {
setOpen(false);
}, []);
const setToday = useCallback(() => {
setValue([now, now]);
openToast('Today Selected');
}, [openToast]);
const setYesterday = useCallback(() => {
setValue([yesterday, yesterday]);
openToast('Yesterday Selected');
}, [openToast]);
const setWeek = useCallback(() => {
setValue([startWeek, endWeek]);
openToast('This Week Selected');
}, [openToast]);
const setMonth = useCallback(() => {
setValue([startMonth, endMonth]);
openToast('Last Mont Selected');
}, [openToast]);
const clear = useCallback(() => {
setValue(null);
openToast('Clear Value');
}, [openToast]);
return (
<Page className="md-range-filter">
<h4 className="md-header">Filter Results by</h4>
<div className="mbsc-padding">
<Button onClick={setToday} className="mbsc-button-block">
Today
</Button>
<Button onClick={setYesterday} className="mbsc-button-block">
Yesterday
</Button>
<Button onClick={setWeek} className="mbsc-button-block">
This Week
</Button>
<Button onClick={setMonth} className="mbsc-button-block">
Last Month
</Button>
<Button onClick={clear} className="mbsc-button-block">
Clear
</Button>
</div>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Or by a custom range</div>
<Datepicker select="range" display="inline" showRangeLabels={false} value={value} />
</div>
<Toast message={toastMsg} isOpen={isOpen} onClose={handleCloseToast} />
</Page>
);
}
export default App;
import { Button, Datepicker, Page, setOptions, Toast } from '@mobiscroll/react';
import { FC, useCallback, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const now = new Date();
const curr = new Date();
const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
const startWeek = new Date(curr.setDate(curr.getDate() - curr.getDay()));
const endWeek = new Date(curr.setDate(curr.getDate() - curr.getDay() + 6));
const startMonth = new Date(curr.getFullYear(), curr.getMonth() - 1, 1);
const endMonth = new Date(curr.getFullYear(), curr.getMonth(), 0);
const App: FC = () => {
const [value, setValue] = useState<Array<Date> | null>(null);
const [isOpen, setOpen] = useState<boolean>(false);
const [toastMsg, setMsg] = useState<string>('');
const openToast = useCallback((message: string) => {
setMsg(message);
setOpen(true);
}, []);
const handleCloseToast = useCallback(() => {
setOpen(false);
}, []);
const setToday = () => {
setValue([now, now]);
openToast('Today Selected');
};
const setYesterday = () => {
setValue([yesterday, yesterday]);
openToast('Yesterday Selected');
};
const setWeek = () => {
setValue([startWeek, endWeek]);
openToast('This Week Selected');
};
const setMonth = () => {
setValue([startMonth, endMonth]);
openToast('Last Mont Selected');
};
const clear = () => {
setValue(null);
openToast('Clear Value');
};
return (
<Page className="md-range-filter">
<h4 className="md-header">Filter Results by</h4>
<div className="mbsc-padding">
<Button onClick={setToday} className="mbsc-button-block">
Today
</Button>
<Button onClick={setYesterday} className="mbsc-button-block">
Yesterday
</Button>
<Button onClick={setWeek} className="mbsc-button-block">
This Week
</Button>
<Button onClick={setMonth} className="mbsc-button-block">
Last Month
</Button>
<Button onClick={clear} className="mbsc-button-block">
Clear
</Button>
</div>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Or by a custom range</div>
<Datepicker controls={['calendar']} select="range" display="inline" showRangeLabels={false} value={value} />
</div>
<Toast message={toastMsg} isOpen={isOpen} onClose={handleCloseToast} />
</Page>
);
};
export default App;
.md-range-filter .md-header {
text-align: center;
padding: 1em 0.75em 0 0.75em;
margin: 0;
}