The calendar component generates a Mobiscroll input that inherits the theme and overall styling rules. It can however be overridden by setting the relevant options for the component.
There are three ways to use the calendar:
- Use it on an existing input by using the
inputComponentprop. A great example is usage with anIonInput - Let the component generate the Mobiscroll input. Give it the extra styling and overrides through options
- Embed the picker without an input. This can be the page itself or a more complex popup
Demo
Use it on any external input by passing the component to the inputComponent option.
<Datepicker
controls={['calendar']}
inputComponent="input"
inputProps={{
placeholder: 'Please Select...'
}}
/>If you don't pass a reference to an external input, the component takes care of generating its own input.
<Datepicker
controls={['calendar']}
/>Use it for multiple date picking with a mobiscroll input and pill rendering for the selected values.
<Datepicker
controls={['calendar']}
selectMultiple={true}
/>
It can be embedded into the page or a popup as an inline picker by setting the display option to inline.
<Datepicker
controls={['calendar']}
display="inline"
/>import { Datepicker, Page, setOptions } from '@mobiscroll/react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
return (
<Page>
<Datepicker inputComponent="input" inputProps={{ placeholder: 'Please Select...' }} />
<Datepicker inputStyle="outline" label="Date" labelStyle="stacked" placeholder="Please Select..." />
<Datepicker display="inline" />
</Page>
);
}
export default App;
import { Datepicker, Page, setOptions } from '@mobiscroll/react';
import { FC } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => (
<Page>
<Datepicker inputComponent="input" inputProps={{ placeholder: 'Please Select...' }} />
<Datepicker inputStyle="outline" label="Date" labelStyle="stacked" placeholder="Please Select..." />
<Datepicker display="inline" />
</Page>
);
export default App;