Single value selection is the default behavior of the date picker. You can explicitly enable it by setting the selectMultiple to false.
You can dynamically switch between single and multiple select or range select which helps with building a system for one-way and two-way bookings.
Demo
<Datepicker
controls={['date']}
selectMultiple={false}
/>
<Datepicker
controls={['time']}
selectMultiple={false}
/>
<Datepicker
controls={['timegrid']}
selectMultiple={false}
/>
<Datepicker
controls={['datetime']}
selectMultiple={false}
/>
JSXTSX
import { Datepicker, Page, setOptions } from '@mobiscroll/react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
return (
<Page>
<Datepicker
controls={['date']}
selectMultiple={false}
label="Date"
inputStyle="box"
labelStyle="stacked"
placeholder="Please Select..."
/>
<Datepicker
controls={['time']}
selectMultiple={false}
label="Time"
inputStyle="box"
labelStyle="stacked"
placeholder="Please Select..."
/>
<Datepicker
controls={['timegrid']}
selectMultiple={false}
label="Time grid"
inputStyle="box"
labelStyle="stacked"
placeholder="Please Select..."
/>
<Datepicker
controls={['date', 'time']}
selectMultiple={false}
label="Date & time"
inputStyle="box"
labelStyle="stacked"
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={['date']}
selectMultiple={false}
label="Date"
inputStyle="box"
labelStyle="stacked"
placeholder="Please Select..."
/>
<Datepicker
controls={['time']}
selectMultiple={false}
label="Time"
inputStyle="box"
labelStyle="stacked"
placeholder="Please Select..."
/>
<Datepicker
controls={['timegrid']}
selectMultiple={false}
label="Time grid"
inputStyle="box"
labelStyle="stacked"
placeholder="Please Select..."
/>
<Datepicker
controls={['date', 'time']}
selectMultiple={false}
label="Date & time"
inputStyle="box"
labelStyle="stacked"
placeholder="Please Select..."
/>
</Page>
);
export default App;