Inline Mode

Inline mode displays the timepicker clock directly in your page layout, always visible without requiring a click to open. Perfect for dashboards, settings pages, or when you want the time selection to be immediately accessible.

• No modal or backdrop - stays in document flow
• Always visible - no click needed to open
• Works with all themes and customization options
• Perfect for embedded forms and settings panels

Set ui.inline.enabled to true and pass the element to render into, or its selector, as ui.inline.container. The picker renders there when you call create().

HTML Structure

1<input type="text" id="timepicker" />
2<div id="timepicker-container"></div>

JavaScript

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

• container is required. The constructor throws if it is missing or the element is not found.
• showButtons (default false) shows the OK and Cancel buttons. OK writes the time to the input and fires confirm / onConfirm. Cancel resets the picker to the input's value and fires cancel / onCancel. The picker stays on the page in both cases.
• autoUpdate (default false) writes the time to the input while the user changes it.
• Focus is not trapped in inline mode unless you set behavior.focusTrap yourself.

Combine inline mode with other options for complete customization:

12-hour Inline Picker

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

24-hour Inline with Theme

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

Inline with Time Restrictions

1const picker = new TimepickerUI(input, {
2  ui: {
3    inline: { enabled: true, container: '#timepicker-container' }
4  },
5  clock: {
6    type: '24h',
7    disabledTime: {
8      hours: [0, 1, 2, 3, 4, 5, 22, 23],
9      minutes: [15, 30, 45]
10    }
11  }
12});
13
14picker.create();

In inline mode the picker's root (.tp-ui-modal) gets the tp-ui--inline class. Its card, .tp-ui-wrapper, stays in the page flow, is centered, and fills the container up to 328px. These inline rules use !important, so your overrides need it too.

Card Border Instead of Shadow

1.tp-ui--inline .tp-ui-wrapper {
2  box-shadow: none !important;
3  border: 1px solid #e0e0e0;
4}

Sidebar Integration

1.sidebar .tp-ui--inline .tp-ui-wrapper {
2  margin: 20px auto !important;
3}

Set ui.inline.embedded to true when the picker sits inside your own dialog, popover or form. The picker then behaves as part of that component instead of a standalone card:

• The root is role="group" with an accessible name, not a dialog. It has no aria-modal.
• The card has no shadow and no minimum height. The max-width of 328px stays.
• Focus is not trapped, whatever behavior.focusTrap says, and the picker does not take focus when it mounts.
• The picker's wrapper is not a tab stop, so Tab does not stop on it before the controls inside. New in 4.7.0.
• The hour, minute and second fields have no nameattribute, so they are not sent when the picker sits inside a <form>. Your own input holds the value. New in 4.7.0.
• embedded is ignored unless enabled is true. The default is false.

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});

A picker created in a hidden container, such as a closed <dialog>, lays out its clock face or wheel the first time it is shown. Before 4.7.0 the clock face measured itself on creation and got a size of 0 there, so create the picker once the container is visible, as above. See the live example.

Set ui.inline.showTitle to false when your page or host component already shows a heading. The title ( "Select time" or "Enter Time") is hidden visually but still names the picker for screen readers, and the header keeps its top spacing. The root gets the class tp-ui--title-hidden. The default is true, and the option is ignored unless enabled is true. 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    }
9  }
10});
11picker.create();

An embedded card takes its background, corners and backdrop filter from three variables. Set them on the root or on a parent element. They fall back to --tp-bg, --tp-radius-md and --tp-backdrop-filter. New in 4.7.0.

1.my-dialog .tp-ui--embedded {
2  --tp-embedded-bg: transparent;
3  --tp-embedded-radius: 0;
4  --tp-embedded-backdrop-filter: none;
5}

A host component can drive the view itself with setView() and getView(), for example with a button in its own footer. The picker emits switch:view with the new view.

1const toggle = document.querySelector('#view-toggle');
2
3toggle.addEventListener('click', () => {
4  picker.setView(picker.getView() === 'clock' ? 'keyboard' : 'clock');
5});
6
7picker.on('switch:view', ({ view }) => {
8  toggle.textContent = view === 'clock' ? 'Keyboard' : 'Clock';
9});

Using inline mode in React components. container takes the element from a ref, so the container needs no id:

1import { useEffect, useRef } from 'react';
2import { TimepickerUI } from 'timepicker-ui';
3
4function InlineTimepicker() {
5  const inputRef = useRef<HTMLInputElement>(null);
6  const containerRef = useRef<HTMLDivElement>(null);
7
8  useEffect(() => {
9    if (!inputRef.current || !containerRef.current) return;
10
11    const picker = new TimepickerUI(inputRef.current, {
12      ui: {
13        inline: {
14          enabled: true,
15          container: containerRef.current,
16          autoUpdate: true
17        },
18        theme: 'm3-green'
19      },
20      clock: { type: '12h' }
21    });
22
23    picker.create();
24
25    return () => {
26      picker.destroy();
27    };
28  }, []);
29
30  return (
31    <div className="p-8">
32      <input ref={inputRef} type="text" aria-label="Selected time" readOnly />
33      <div ref={containerRef} />
34    </div>
35  );
36}