Responsive Calendar
The date & time has a liquid layout, which means it nicely adapts to its surroundings. There are times however when you would like to set up the component responsively.
Use the responsive option to configure the picker and change the options based on the viewport width. There are five predefined breakpoints:
xsmall- min-width: 0pxsmall- min-width: 576pxmedium- min-width: 768pxlarge- min-width: 992pxxlarge- min-width: 1200px- use
customfor setting a custombreakpoint
It is a good idea to change the display or controls option to tailor the UX. This way you can have a bottom positioned calendar on mobile, a popover anchored to the input on tablet and desktop display on large screens.
Demo
<Datepicker
responsive={{
}}
/>JSXTSX
import { Datepicker, Page, setOptions } from '@mobiscroll/react';
import { useMemo } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const myResponsive = useMemo(
() => ({
xsmall: {
display: 'bottom',
},
small: {
display: 'anchored',
},
custom: {
// Custom breakpoint
breakpoint: 800,
display: 'anchored',
touchUi: false,
},
}),
[],
);
return (
<Page>
<Datepicker responsive={myResponsive} inputStyle="box" placeholder="Please Select..." />
</Page>
);
}
export default App;
import { Datepicker, MbscDatepickerOptions, MbscResponsiveOptions, Page, setOptions } from '@mobiscroll/react';
import { FC, useMemo } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => {
const myResponsive: MbscResponsiveOptions<MbscDatepickerOptions> = useMemo(
() => ({
xsmall: {
display: 'bottom',
},
small: {
display: 'anchored',
},
custom: {
// Custom breakpoint
breakpoint: 800,
display: 'anchored',
touchUi: false,
},
}),
[],
);
return (
<Page>
<Datepicker responsive={myResponsive} inputStyle="box" placeholder="Please Select..." />
</Page>
);
};
export default App;