Javascript Date & Time Time selection 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

When passing controls: ['time'], it will render a time-only picker - scroller for touchUi: true and a dropdown for touchUi: false. For a time grid use controls: ['timegrid'] instead.

You can change the timeFormat or rely on the formats coming from the locale settings.

Interested in date selection? Learn how to set up a date-only picker →

Download and try example

Time list Time grid

Javascript jQuery Angular React Vue

mobiscroll.datepicker('#time-picker', {
    controls: ['time'],
    touchUi: 
});
mobiscroll.datepicker('#time-24h-picker', {
    controls: ['time'],
    timeFormat: 'HH:mm',
    touchUi: 
});
mobiscroll.datepicker('#time-12h-picker', {
    controls: ['time'],
    timeFormat: 'h:mm A',
    touchUi: 
});
mobiscroll.datepicker('#hour-min-sec-picker', {
    controls: ['time'],
    timeFormat: 'HH:mm:ss',
    headerText: 'Time: {value}'
    touchUi: 
});