Switch Icon

Show a button that switches between the clock face and the keyboard view, with ui.viewSwitch.

Enable the View Switch

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

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

Start in the Keyboard View

#

Open in the keyboard view, with the icon to switch to the clock face:

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

Switch from Your Own Button

#

setView() and getView() drive the view from outside, and switch:view reports every change with the view that is now shown. Both need the clock or keyboard views, so they do nothing in the wheel modes. New in 4.7.0.

Select time

1const picker = new TimepickerUI(input, {
2  clock: { type: '24h' }
3});
4picker.create();
5
6button.addEventListener('click', () => {
7  picker.setView(picker.getView() === 'clock' ? 'keyboard' : 'clock');
8});
9
10picker.on('switch:view', ({ view }) => {
11  button.textContent = view === 'clock' ? 'Keyboard' : 'Clock';
12});

With Theme

#

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