Date & Time Picker
The date picker ships with five built-in variations for rendering the UI. The controls option supports the following:
date- renders a date-only scroller or dropdown controltime- renders a time-only scroller or dropdown controltimegrid- renders a time grid for time selectiondatetime- renders a date & time scroller or dropdowncalendar- renders a calendar view for date picking
Use controls: ['datetime'] for rendering a date & time picker within the same control, tied to the same input, or use them separately for two inputs - controls: ['date'] and controls: ['time']. It will render a scrollers for touchUi: true and a dropdowns for touchUi: false.
For a time grid use the controls: ['timegrid'] instead of 'time'.
Interested in dynamically switching between modes? Learn how to set up responsive behavior →
Demo
Calendar with time picker
For date and time selection pass 'calendar' and a 'time' to the controls option.
Calendar with time grid
Alternatively the time-part can be selected from a time grid instead of a scrollable list. Pass 'calendar' and a 'timegrid' to the controls option.
JSXTSX
import { Datepicker, setOptions } from '@mobiscroll/react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
return (
<div>
<Datepicker controls={['calendar', 'time']} display="inline" />
<Datepicker controls={['calendar', 'timegrid']} display="inline" />
</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', 'time']} display="inline" />
<Datepicker controls={['calendar', 'timegrid']} display="inline" />
</div>
);
export default App;