The date picker 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 date picker:
- 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
Date picker with input
Use it on any external input by passing the component to the inputComponent option.
<Datepicker
controls={['date']}
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={['date']}
/>Embeddable date picker
It can be embedded into the page or a popup as an inline picker by setting the display option to inline.
<Datepicker
controls={['date']}
display="inline"
/>JSXTSX
import { Datepicker, Page, setOptions } from '@mobiscroll/react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
return (
<Page>
<Datepicker controls={['date']} inputComponent="input" inputProps={{ placeholder: 'Please Select...' }} />
<Datepicker controls={['date']} inputStyle="outline" label="Date" labelStyle="stacked" placeholder="Please Select..." />
<Datepicker controls={['date']} 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 controls={['date']} inputComponent="input" inputProps={{ placeholder: 'Please Select...' }} />
<Datepicker controls={['date']} inputStyle="outline" label="Date" labelStyle="stacked" placeholder="Please Select..." />
<Datepicker controls={['date']} display="inline" />
</Page>
);
export default App;