Inline Mode

Display timepicker without modal overlay

Inline with Theme

Apply custom theme to inline timepicker:

Select time

1const picker = new TimepickerUI(input, {
2  ui: {
3    inline: {
4      enabled: true,
5      container: '#timepicker-container',
6      autoUpdate: true
7    },
8    theme: 'dark'
9  },
10  clock: { type: '24h' }
11});
12picker.create();

Embedded Card Without a Title

#

ui.inline.showTitle: false hides the title when your page already has a heading. It stays available to screen readers. New in 4.7.0.

1const picker = new TimepickerUI(input, {
2  ui: {
3    inline: {
4      enabled: true,
5      container: '#timepicker-container',
6      embedded: true,
7      showTitle: false,
8      autoUpdate: true
9    }
10  }
11});
12picker.create();

Embedded in a Dialog

#

With ui.inline.embedded the picker drops its own card chrome and dialog semantics, so it can live inside your own <dialog>. The picker is created when the dialog first opens. Before 4.7.0 the clock face could not measure itself inside a hidden container, and from 4.7.0 it lays itself out when it is first shown.

1const dialog = document.querySelector('dialog');
2const input = document.querySelector('#time');
3let picker = null;
4
5openButton.addEventListener('click', () => {
6  dialog.showModal();
7  if (picker) return;
8
9  picker = new TimepickerUI(input, {
10    ui: {
11      inline: {
12        enabled: true,
13        container: '#dialog-picker',
14        embedded: true,
15        autoUpdate: true
16      }
17    }
18  });
19  picker.create();
20});