Custom Container

Control where the timepicker modal is rendered in the DOM

ui.appendTo

By default, the timepicker modal is appended to document.body. Set ui.appendTo to a CSS selector or an element to render it inside another element. The picker looks a selector up with document.querySelector each time it opens, so the element must exist by then. A selector cannot point into a shadow root or another frame's document.

Custom Container

#

Append the modal to a specific container:

Select time

1import { TimepickerUI } from 'timepicker-ui';
2
3const input = document.querySelector('#timepicker');
4const picker = new TimepickerUI(input, {
5  ui: { appendTo: '#modal-container' }
6});
7
8picker.create();
9
10// HTML:
11// <div id="modal-container"></div>

#

Use inside a modal or dialog component:

index.ts

1import { TimepickerUI } from 'timepicker-ui';
2
3// HTML:
4// <div class="modal" id="appointment-modal">
5//   <div class="modal-content" id="modal-content">
6//     <h2>Schedule Appointment</h2>
7//     <input id="timepicker" type="text" />
8//   </div>
9// </div>
10
11const input = document.querySelector('#timepicker');
12const picker = new TimepickerUI(input, {
13  // Append to modal content instead of body
14  ui: { appendTo: '#modal-content' }
15});
16
17picker.create();

React

#

Render the container in your component and pass its selector. Create the picker in an effect, so it only runs in the browser:

index.tsx

1import { useEffect, useRef } from 'react';
2import { TimepickerUI } from 'timepicker-ui';
3
4function TimepickerWithContainer() {
5  const inputRef = useRef<HTMLInputElement>(null);
6
7  useEffect(() => {
8    if (!inputRef.current) return;
9
10    const picker = new TimepickerUI(inputRef.current, {
11      ui: { appendTo: '#timepicker-root' }
12    });
13    picker.create();
14
15    return () => {
16      picker.destroy();
17    };
18  }, []);
19
20  return (
21    <>
22      <input ref={inputRef} type="text" />
23      <div id="timepicker-root" />
24    </>
25  );
26}

Iframe Integration

#

Load timepicker-ui in the iframe's own page. The modal is appended to that document's body, so it stays inside the frame:

index.ts

1// Script running inside the iframe page
2import { TimepickerUI } from 'timepicker-ui';
3
4const input = document.querySelector('#timepicker');
5const picker = new TimepickerUI(input);
6
7picker.create();

Scoped Styles

#

Use custom container with scoped CSS:

index.ts

1import { TimepickerUI } from 'timepicker-ui';
2
3// HTML:
4// <div class="custom-scope" id="scoped-container">
5//   <input id="timepicker" type="text" />
6// </div>
7
8const input = document.querySelector('#timepicker');
9const picker = new TimepickerUI(input, {
10  ui: {
11    appendTo: '#scoped-container',
12    cssClass: 'scoped-picker'
13  }
14});
15
16picker.create();
17
18// CSS: the modal now sits inside .custom-scope,
19// so rules scoped to it reach the picker
20// .custom-scope .tp-ui-wrapper.scoped-picker {
21//   --tp-primary: #0b57d0;
22// }

Multiple Containers

#

Different pickers in different containers:

index.ts

1import { TimepickerUI } from 'timepicker-ui';
2
3// Picker 1 in sidebar
4const input1 = document.querySelector('#timepicker-1');
5const picker1 = new TimepickerUI(input1, {
6  ui: { appendTo: '#sidebar-container' }
7});
8picker1.create();
9
10// Picker 2 in main content
11const input2 = document.querySelector('#timepicker-2');
12const picker2 = new TimepickerUI(input2, {
13  ui: { appendTo: '#main-content' }
14});
15picker2.create();
16
17// Picker 3 in modal
18const input3 = document.querySelector('#timepicker-3');
19const picker3 = new TimepickerUI(input3, {
20  ui: { appendTo: '#modal-dialog' }
21});
22picker3.create();