Initializing the Picker
The range 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 four ways to use the range 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
- Use it with two separate inputs of any type, one for
startand another forend - 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
select="range"
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
select="range"
/>
Sometimes it makes sense to use two separate inputs for start and end. You can pass a reference through the startInput and endInput options of mobiscroll or any type of input, like an ion-input.
const [start, startRef] = React.useState(null);
const [end, endRef] = React.useState(null);
<Datepicker
select="range"
startInput={start}
endInput={end}
/>
<Input
ref={startRef}
label="Start"
placeholder="Please Select...">
</Input>
<Input
ref={endRef}
label="End"
placeholder="Please Select...">
</Input>
It can be embedded into the page or a popup as an inline picker by setting the display option to inline.
<Datepicker
select="range"
display="inline"
/>import { Datepicker, Input, Page, setOptions } from '@mobiscroll/react';
import { useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [start, startRef] = useState(null);
const [end, endRef] = useState(null);
const inputProps = useMemo(
() => ({
placeholder: 'Please Select...',
}),
[],
);
const boxInputProps = useMemo(
() => ({
label: 'Range',
labelStyle: 'stacked',
inputStyle: 'outline',
placeholder: 'Please Select...',
}),
[],
);
return (
<Page>
<Datepicker select="range" inputComponent="input" inputProps={inputProps} />
<Datepicker select="range" inputProps={boxInputProps} />
<div className="mbsc-grid mbsc-no-padding">
<div className="mbsc-row">
<div className="mbsc-col-6">
<Input ref={startRef} label="Start" labelStyle="stacked" inputStyle="outline" placeholder="Please Select..."></Input>
</div>
<div className="mbsc-col-6">
<Input ref={endRef} label="End" labelStyle="stacked" inputStyle="outline" placeholder="Please Select..."></Input>
</div>
</div>
</div>
<Datepicker select="range" startInput={start} endInput={end} />
<Datepicker select="range" display="inline" />
</Page>
);
}
export default App;
import { Datepicker, Input, Page, setOptions } from '@mobiscroll/react';
import { FC, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => {
const [start, startRef] = useState<Input | null>(null);
const [end, endRef] = useState<Input | null>(null);
const inputProps = useMemo(
() => ({
placeholder: 'Please Select...',
}),
[],
);
const boxInputProps = useMemo(
() => ({
label: 'Range',
labelStyle: 'stacked',
inputStyle: 'outline',
placeholder: 'Please Select...',
}),
[],
);
return (
<Page>
<Datepicker controls={['calendar']} select="range" inputComponent="input" inputProps={inputProps} />
<Datepicker controls={['calendar']} select="range" inputProps={boxInputProps} />
<div className="mbsc-grid mbsc-no-padding">
<div className="mbsc-row">
<div className="mbsc-col-6">
<Input ref={startRef} label="Start" labelStyle="stacked" inputStyle="outline" placeholder="Please Select..."></Input>
</div>
<div className="mbsc-col-6">
<Input ref={endRef} label="End" labelStyle="stacked" inputStyle="outline" placeholder="Please Select..."></Input>
</div>
</div>
</div>
<Datepicker select="range" startInput={start} endInput={end} />
<Datepicker controls={['calendar']} select="range" display="inline" />
</Page>
);
};
export default App;