---
title: "Javascript Date & Time Time selection Example | Mobiscroll"
component: "Date & Time"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/datetime/time-picker"
---

# Time selection - JavaScript Date & Time demo

Javascript Time picker demo with scroller wheel rendering for mobile and touch devices. Bottom or center display. Plain JavaScript API.

- [Live demo](https://demo.mobiscroll.com/javascript/datetime/time-picker)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/datepicker/datetime/time-picker)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/datetime/time-picker.md), [Angular](https://demo.mobiscroll.com/angular/datetime/time-picker.md), [React](https://demo.mobiscroll.com/react/datetime/time-picker.md), [Vue](https://demo.mobiscroll.com/vue/datetime/time-picker.md)

## Description

The date picker ships with five built-in variations for rendering the UI. The [`controls` option](https://mobiscroll.com/docs/javascript/datepicker/api#opt-controls) 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](https://demo.mobiscroll.com/javascript/datetime/localization).

**Interested in date selection?** [Learn how to set up a date-only picker →](https://demo.mobiscroll.com/javascript/datetime/date-picker)

## What this demo shows

- Four time picker configurations for selecting a single time with different time formats.
- **Display mode** A segmented control above the examples switches between a time list and a time grid. The time list is selected by default.
- **Default time picker** Separate scrollable wheels let users select the hour, minute, and AM/PM value.
- **24-hour time picker** Separate scrollable wheels let users select the hour and minute in 24-hour format.
- **12-hour time picker** Separate scrollable wheels let users select the hour, minute, and AM/PM value.
- **Time picker with seconds** Separate scrollable wheels let users select the hour, minute, and second. The header displays the selected time.
- **Input behavior** The picker opens at the bottom of the container over a darkened backdrop. Clicking outside the picker closes it.
- **Scrolling behavior** The current values appear in a central selection area, while neighboring values are visually subdued. Users can scroll vertically through each wheel to change the selected time.
- **Footer actions** In the input-based examples, `Cancel` discards the change and `Set` confirms the selected time.
- **Input value** After the user selects `Set`, the input displays the confirmed time in the format configured for that example.

## Best for

- **Appointment and booking forms** Let users choose a single appointment, reservation, or service time from a wheel-style list or time grid.
- **Localized time entry** Support interfaces that need either 12-hour time with AM/PM or 24-hour time.
- **Precise time selection** Include seconds when users need to record or configure a time more precisely than hours and minutes.
- **Configurable scheduling workflows** Offer different time selection layouts and formats while keeping the interaction focused on a single time value.

## Tutorial

- (x) Time list
- ( ) Time grid

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

With "Time grid":

```js
mobiscroll.datepicker('#time-picker', {
    controls: ['timegrid'],
    touchUi: true
});
```

```js
mobiscroll.datepicker('#time-24h-picker', {
    controls: ['time'],
    timeFormat: 'HH:mm',
    touchUi: true
});
```

With "Time grid":

```js
mobiscroll.datepicker('#time-24h-picker', {
    controls: ['timegrid'],
    timeFormat: 'HH:mm',
    touchUi: true
});
```

```js
mobiscroll.datepicker('#time-12h-picker', {
    controls: ['time'],
    timeFormat: 'h:mm A',
    touchUi: true
});
```

With "Time grid":

```js
mobiscroll.datepicker('#time-12h-picker', {
    controls: ['timegrid'],
    timeFormat: 'h:mm A',
    touchUi: true
});
```

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

With "Time grid":

```js
mobiscroll.datepicker('#hour-min-sec-picker', {
    controls: ['timegrid'],
    timeFormat: 'HH:mm:ss',
    headerText: 'Time: {value}'
    touchUi: true
});
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-themeVariant) - option
- [`controls`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-controls) - option
- [`timeFormat`](https://mobiscroll.com/docs/javascript/datepicker/api#localization-timeFormat) - option
- [`headerText`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-headerText) - option

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

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

mobiscroll.datepicker('#demo-24h', {
  controls: ['time'],
  timeFormat: 'HH:mm',
});

mobiscroll.datepicker('#demo-12h', {
  controls: ['time'],
  timeFormat: 'h:mm A',
});

mobiscroll.datepicker('#demo-hms', {
  controls: ['time'],
  timeFormat: 'HH:mm:ss',
  headerText: 'Time: {value}',
});
```

### HTML

```html
<label>
    Time picker
    <input id="demo-time" mbsc-input data-input-style="outline" data-label-style="stacked" placeholder="Please select..." />
</label>

<label>
    24 hour picker 
    <input id="demo-24h" mbsc-input data-input-style="outline" data-label-style="stacked" placeholder="Please select..." />
</label>

<label>
    12 h picker with AM/PM
    <input id="demo-12h" mbsc-input data-input-style="outline" data-label-style="stacked" placeholder="Please select..." />
</label>

<label>
    Hour, Min, Sec
    <input id="demo-hms" mbsc-input data-input-style="outline" data-label-style="stacked" placeholder="Please select..." />
</label>
```

## Implementation notes

- Four separate input-bound picker instances can share one `controls` value, switchable at runtime between `['time']` and `['timegrid']`.
- Each instance is created with `controls: ['time']` (time list) by default; `controls` can be updated on multiple instances at once via `setOptions({ controls: [control] })`, e.g. swapping every instance to `controls: ['timegrid']`.
- **Default time picker**: `controls: ['time']` with no `timeFormat` override - uses the locale's default hour/minute/AM-PM format.
- **24-hour time picker**: `controls: ['time'], timeFormat: 'H:mm'` - hour and minute wheels only, no AM/PM.
- **12-hour time picker**: `controls: ['time'], timeFormat: 'h:mm A'` - hour, minute, and AM/PM wheels.
- **Time picker with seconds**: `controls: ['time'], timeFormat: 'HH:mm:ss', headerText: 'Time: {value}'` - adds an hour/minute/second wheel set and overrides the picker header to show the live-selected value via the `{value}` placeholder.
- Each instance is bound to a Mobiscroll-generated input (`mbsc-input`, `data-input-style="outline"`, `data-label-style="stacked"`) rather than rendered inline.
- `touchUi` is also settable on each instance to force the touch-scroller wheels (`true`) or the desktop dropdown rendering (`false`) regardless of the detected device; this demo doesn't wire it to a live toggle, but it's a real, valid option on the same picker.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-javascript.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config javascript
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config javascript --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/javascript/getting-started/installation

## Related demos

- Previous: [Date selection](https://demo.mobiscroll.com/javascript/datetime/date-picker.md) - Javascript Date picker demo with scroller-style wheels for mobile and touch devices. Max date set to 100 yr. With source code.
- Next: [Date & time selection](https://demo.mobiscroll.com/javascript/datetime/date-time-picker.md) - Javascript Datetime scroller demo with date, hour and minute wheels. Featuring iPhone style rendering and format. With source code.