Label Customization
Whether you are using the calendar or scroller for range selection, the microcopy for rangeStartLabel and rangeEndLabel can be easily overridden. For flight booking "Outbound" and "Return" makes sense while for accommodation booking "Check in" and "Check out" might be more appropriate.
The range start/end labels can also be hidden in some cases if needed. Use the showRangeLabels option for that.
Furthermore, you have the option to toggle the range highlight with the rangeHighlight option, if needed.
Demo
Customize
Customize the start & end labels
Show range labels
Override localized labels with custom text
Show
for the start label
Show
for the end label
Override label helpers with custom text
Show
for start helper
Show
for end helper
Highlight the selected range or only start/end dates
Highlight selected range
<Datepicker
controls={['calendar ']}
select="range"
rangeHighlight={true }
showRangeLabels={true }
rangeStartLabel="Outbound "
rangeEndLabel="Return "
rangeStartHelp="Set dates "
rangeEndHelp="Set dates "
/>JSXTSX
import { Datepicker, setOptions } from '@mobiscroll/react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
return (
<div>
<Datepicker
controls={['calendar']}
select="range"
display="inline"
rangeHighlight={true}
showRangeLabels={true}
rangeStartLabel="Outbound"
rangeEndLabel="Return"
rangeStartHelp="Set dates"
rangeEndHelp="Set dates"
/>
<Datepicker
controls={['date']}
select="range"
display="inline"
rangeHighlight={true}
showRangeLabels={true}
rangeStartLabel="Outbound"
rangeEndLabel="Return"
rangeStartHelp="Set dates"
rangeEndHelp="Set dates"
/>
</div>
);
}
export default App;
import { Datepicker, setOptions } from '@mobiscroll/react';
import { FC } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => (
<div>
<Datepicker
controls={['calendar']}
select="range"
display="inline"
rangeHighlight={true}
showRangeLabels={true}
rangeStartLabel="Outbound"
rangeEndLabel="Return"
rangeStartHelp="Set dates"
rangeEndHelp="Set dates"
/>
<Datepicker
controls={['date']}
select="range"
display="inline"
rangeHighlight={true}
showRangeLabels={true}
rangeStartLabel="Outbound"
rangeEndLabel="Return"
rangeStartHelp="Set dates"
rangeEndHelp="Set dates"
/>
</div>
);
export default App;