Mobile Version

Open the picker in the keyboard view, where users type the time, with ui.initialView: 'keyboard'.

Start in the Keyboard View

Open with the hour and minute fields instead of the clock face:

Select time

1const picker = new TimepickerUI(input, {
2  ui: { initialView: 'keyboard' }
3});
4picker.create();

Keyboard View with Custom Labels

#

Change the title and the field captions of the keyboard view:

Select time

1const picker = new TimepickerUI(input, {
2  ui: { initialView: 'keyboard' },
3  labels: {
4    hour: 'Hour',
5    minute: 'Minute',
6    keyboardTitle: 'Enter Time'
7  }
8});
9picker.create();

Keyboard View with View Switch

#

Show the icon that switches between the keyboard view and the clock face:

Select time

1const picker = new TimepickerUI(input, {
2  ui: {
3    initialView: 'keyboard',
4    viewSwitch: true
5  }
6});
7picker.create();

Keyboard View with 24h

#

Select time

1const picker = new TimepickerUI(input, {
2  ui: { initialView: 'keyboard' },
3  clock: { type: '24h' }
4});
5picker.create();