The picker supports multiple controls:
- Calendar view - can be used on its own or combined with a time scroller
- Date picker - can be used separately or together with a time picker as a scroller on mobile and as a dropdown on desktop
- Time picker - can be used separately or together with a date picker or calendar
- Datetime picker - can be used as a scroller on mobile and as a dropdown on desktop
Use the controls option (expecting an array) to configure the picker.
Demo
Renders a calendar view for range selection.
<Datepicker
controls={['calendar']}
select="range"
touchUi=Renders a date scroller for touch and a dropdown for pointer interaction.
<Datepicker
controls={['date']}
select="range"
touchUi=Renders a compact (one wheel) date picker with time. The scroller can be used with touch interaction on mobile and the dropdown for pointer interaction on desktop.
<Datepicker
controls={['datetime']}
select="range"
touchUi=Renders a combined view of a calendar and time scroller/dropdown for date and time range selection.
<Datepicker
controls={['calendar', 'time']}
select="range"
touchUi=
Renders a time scroller for touch and a dropdown for pointer interaction. The time format comes from the locale option that can be overridden.
<Datepicker
controls={['time']}
select="range"
touchUi=import { Datepicker, Page, setOptions } from '@mobiscroll/react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
return (
<Page>
<Datepicker
controls={['calendar']}
select="range"
label="Calendar"
labelStyle="stacked"
inputStyle="outline"
placeholder="Please Select..."
/>
<Datepicker
controls={['date']}
select="range"
label="Date"
labelStyle="stacked"
inputStyle="outline"
placeholder="Please Select..."
/>
<Datepicker
controls={['datetime']}
select="range"
label="Date & Time"
labelStyle="stacked"
inputStyle="outline"
placeholder="Please Select..."
/>
<Datepicker
controls={['calendar', 'time']}
select="range"
label="Calendar & Time"
labelStyle="stacked"
inputStyle="outline"
placeholder="Please Select..."
/>
<Datepicker
controls={['time']}
select="range"
label="Time"
labelStyle="stacked"
inputStyle="outline"
placeholder="Please Select..."
/>
</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={['calendar']}
select="range"
inputProps={{
label: 'Calendar',
labelStyle: 'stacked',
inputStyle: 'outline',
placeholder: 'Please Select...',
}}
/>
<Datepicker
controls={['date']}
select="range"
inputProps={{
label: 'Date',
labelStyle: 'stacked',
inputStyle: 'outline',
placeholder: 'Please Select...',
}}
/>
<Datepicker
controls={['datetime']}
select="range"
inputProps={{
label: 'Date & Time',
labelStyle: 'stacked',
inputStyle: 'outline',
placeholder: 'Please Select...',
}}
/>
<Datepicker
controls={['calendar', 'time']}
select="range"
inputProps={{
label: 'Calendar & Time',
labelStyle: 'stacked',
inputStyle: 'outline',
placeholder: 'Please Select...',
}}
/>
<Datepicker
controls={['time']}
select="range"
inputProps={{
label: 'Time',
labelStyle: 'stacked',
inputStyle: 'outline',
placeholder: 'Please Select...',
}}
/>
</Page>
);
export default App;