Time Range Picker
Set up the range picker for time pair selection. Regardless if you are interested in the start/end date or the actual range, you have several possibilities of rendering a time range picker. The controls option supports different values:
time- will render a time picker or dropdown for range selectiontimegrid- will render a time grid for range selectioncalendar- will render a calendar view for date range selection (explore date ranges)date- will render a date scroller or dropdown for date range selection (explore date ranges)datetime- will render a compact date scroller or dropdown with time picker for date & time range selection (explore date & time ranges)
Demo
Use the time range inline by setting the display option to inline. Learn about the different ways to use the picker.
<Datepicker
controls={['time']}
select="range"
display="inline"
touchUi=
For a time grid rendering pass 'timegrid' to the controls option.
<Datepicker
controls={['timegrid']}
select="range"
display="inline"
touchUi=Besides rendering it inline, you can link the range to an input that can be a Mobiscroll input or an existing field. Explore the different ways to display the picker.
<Datepicker
controls={['time']}
select="range"
touchUi=
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
controls={['time']}
select="range"
startInput={start}
endInput={end}
touchUi=import { Datepicker, Input, Page, setOptions } from '@mobiscroll/react';
import { useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [start, startRef] = useState(null);
const [end, endRef] = useState(null);
return (
<Page>
<Datepicker controls={['time']} select="range" display="inline" />
<Datepicker controls={['timegrid']} select="range" display="inline" />
<Datepicker
controls={['time']}
select="range"
label="Range"
labelStyle="stacked"
inputStyle="outline"
placeholder="Please Select..."
/>
<Datepicker controls={['time']} select="range" startInput={start} endInput={end} />
<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>
</Page>
);
}
export default App;
import { Datepicker, Input, Page, setOptions } from '@mobiscroll/react';
import { FC, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => {
const [start, startRef] = useState<Input | null>(null);
const [end, endRef] = useState<Input | null>(null);
return (
<Page>
<Datepicker controls={['time']} select="range" display="inline" />
<Datepicker controls={['timegrid']} select="range" display="inline" />
<Datepicker
controls={['time']}
select="range"
inputProps={{
label: 'Range',
labelStyle: 'stacked',
inputStyle: 'outline',
placeholder: 'Please Select...',
}}
/>
<Datepicker controls={['time']} select="range" startInput={start} endInput={end} />
<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>
</Page>
);
};
export default App;