Javascript date time scroller picker example

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 control
time - renders a time-only scroller or dropdown control
timegrid - renders a time grid for time selection
datetime - renders a date & time scroller or dropdown
calendar - 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.

Interested in dynamically switching between modes? Learn how to set up responsive behavior →

Download and try example

Javascript jQuery Angular React Vue

mobiscroll.datepicker('#datetime-picker', {
    controls: ['datetime'],
    touchUi: 
});
mobiscroll.datepicker('#date-time-picker', {
    controls: ['date', 'time'],
    touchUi: 
});
// date picker
mobiscroll.datepicker('#date-picker', {
    controls: ['date'],
    touchUi: 
});

// time picker
mobiscroll.datepicker('#time-picker', {
    controls: ['time'],
    touchUi: 
});