Example · Advanced

Custom Container

Control where the timepicker modal is rendered in the DOM

appendModalSelector

By default, the timepicker modal is appended to document.body. Use appendModalSelector to render it inside a specific container element.

Custom Container

Append the modal to a specific container:

Live

Select time

index.tstypescript

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

Within Modal Dialog

Use inside a modal or dialog component:

index.tstypescript

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  appendModalSelector: '#modal-content'
15});
16
17picker.create();

Shadow DOM

Use with Web Components and Shadow DOM:

index.tstypescript

1class TimePickerComponent extends HTMLElement {
2  constructor() {
3    super();
4    this.attachShadow({ mode: 'open' });
5  }
6
7  connectedCallback() {
8    // Create container inside shadow DOM
9    this.shadowRoot.innerHTML = `
10      <style>
11        @import url('timepicker-ui/index.css');
12      </style>
13      <div id="picker-container">
14        <input id="timepicker" type="text" />
15      </div>
16    `;
17
18    const input = this.shadowRoot.querySelector('#timepicker');
19    const container = this.shadowRoot.querySelector('#picker-container');
20    
21    const picker = new TimepickerUI(input, {
22      appendModalSelector: container
23    });
24    
25    picker.create();
26  }
27}
28
29customElements.define('time-picker', TimePickerComponent);

React Portal Pattern

Integrate with React Portals for complex layouts:

index.tsxtsx

1import { useEffect, useRef, useMemo } from 'react';
2import { createPortal } from 'react-dom';
3import { TimepickerUI } from 'timepicker-ui';
4
5function TimepickerWithPortal() {
6  const inputRef = useRef<HTMLInputElement>(null);
7  const containerRef = useRef<HTMLDivElement>(null);
8  const pickerRef = useRef<TimepickerUI | null>(null);
9
10  const options = useMemo(() => ({
11    appendModalSelector: containerRef.current
12  }), []);
13
14  useEffect(() => {
15    if (!inputRef.current || !containerRef.current) return;
16
17    pickerRef.current = new TimepickerUI(
18      inputRef.current, 
19      options
20    );
21    pickerRef.current.create();
22
23    return () => {
24      pickerRef.current?.destroy();
25    };
26  }, []);
27
28  return (
29    <>
30      <input ref={inputRef} type="text" />
31      {createPortal(
32        <div ref={containerRef} />,
33        document.body
34      )}
35    </>
36  );
37}

Iframe Integration

Use timepicker inside an iframe:

index.tstypescript

1// Inside iframe document
2import { TimepickerUI } from 'timepicker-ui';
3
4const input = document.querySelector('#timepicker');
5const iframeBody = document.body;
6
7const picker = new TimepickerUI(input, {
8  // Keep modal inside iframe
9  appendModalSelector: iframeBody
10});
11
12picker.create();
13
14// Or append to parent document (if same origin)
15const parentContainer = window.parent.document.querySelector('#container');
16const pickerToParent = new TimepickerUI(input, {
17  appendModalSelector: parentContainer
18});

Scoped Styles

Use custom container with scoped CSS:

index.tstypescript

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  appendModalSelector: '#scoped-container',
11  cssClass: 'scoped-picker'
12});
13
14picker.create();
15
16// CSS:
17// .custom-scope {
18//   /* Container styles */
19//   position: relative;
20//   z-index: 100;
21// }
22//
23// .custom-scope .timepicker-ui-modal {
24//   /* Scoped modal styles */
25//   position: absolute;
26// }

Multiple Containers

Different pickers in different containers:

index.tstypescript

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