Date Range Picker
Set up the range picker for date pair selection. Regardless if you are interested in the start/end date or the actual range, you have several possibilities of rendering a date range picker. The controls option supports different values:
calendar- will render a calendar view for date range selectiondate- will render a date scroller or dropdown for date range selectiondatetime- will render a compact date scroller or dropdown with time picker for date & time range selection (explore date & time ranges)time- will render a time picker for range selection (explore time ranges)timegrid- will render a time grid for range selection (explore time ranges)
Demo
One of the most common ways to represent date range selection is through a calendar view with one or more months. Learn about how to configure and customize the calendar.
<Datepicker
controls={['calendar']}
select="range"
calendarType="month"
pages={2}
display="inline"
touchUi=
Passing date to the controls option renders a date scroller or dropdown with customizable start and end labels.
<Datepicker
controls={['date']}
select="range"
display="inline"
touchUi=
By setting the select: 'preset-range' you can pre-set the parameters of the selection rather than let people freely pick start/end dates. The first day and length can be set through the firstSelectDay and selectSize options.
<Datepicker
controls={['calendar']}
select="preset-range"
firstSelectDay={2}
selectSize={10}
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 more ways to use the picker.
<Datepicker
controls={['calendar']}
select="range"
calendarType="month"
pages={2}
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={['calendar']}
select="range"
startInput={start}
endInput={end}
calendarType="month"
pages={2}
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={['calendar']} select="range" calendarType="month" pages={2} display="inline" />
<Datepicker controls={['date']} select="range" display="inline" />
<Datepicker controls={['calendar']} select="preset-range" display="inline" pages={2} firstSelectDay={2} selectSize={10} />
<Datepicker
controls={['calendar']}
select="range"
label="Range"
labelStyle="stacked"
inputStyle="outline"
placeholder="Please Select..."
/>
<Datepicker controls={['calendar']} 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={['calendar']} select="range" calendarType="month" pages={2} display="inline" />
<Datepicker controls={['date']} select="range" display="inline" />
<Datepicker controls={['calendar']} select="preset-range" display="inline" pages={2} firstSelectDay={2} selectSize={10} />
<Datepicker
controls={['calendar']}
select="range"
label="Range"
labelStyle="stacked"
inputStyle="outline"
placeholder="Please Select..."
/>
<Datepicker controls={['calendar']} 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;