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:

Select Time

Within Modal Dialog

Use inside a modal or dialog component:

import { TimepickerUI } from 'timepicker-ui';

// HTML:
// <div class="modal" id="appointment-modal">
//   <div class="modal-content" id="modal-content">
//     <h2>Schedule Appointment</h2>
//     <input id="timepicker" type="text" />
//   </div>
// </div>

const input = document.querySelector('#timepicker');
const picker = new TimepickerUI(input, {
  // Append to modal content instead of body
  appendModalSelector: '#modal-content'
});

picker.create();

Shadow DOM

Use with Web Components and Shadow DOM:

class TimePickerComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    // Create container inside shadow DOM
    this.shadowRoot.innerHTML = `
      <style>
        @import url('timepicker-ui/index.css');
      </style>
      <div id="picker-container">
        <input id="timepicker" type="text" />
      </div>
    `;

    const input = this.shadowRoot.querySelector('#timepicker');
    const container = this.shadowRoot.querySelector('#picker-container');
    
    const picker = new TimepickerUI(input, {
      appendModalSelector: container
    });
    
    picker.create();
  }
}

customElements.define('time-picker', TimePickerComponent);

React Portal Pattern

Integrate with React Portals for complex layouts:

import { useEffect, useRef, useMemo } from 'react';
import { createPortal } from 'react-dom';
import { TimepickerUI } from 'timepicker-ui';

function TimepickerWithPortal() {
  const inputRef = useRef<HTMLInputElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const pickerRef = useRef<TimepickerUI | null>(null);

  const options = useMemo(() => ({
    appendModalSelector: containerRef.current
  }), []);

  useEffect(() => {
    if (!inputRef.current || !containerRef.current) return;

    pickerRef.current = new TimepickerUI(
      inputRef.current, 
      options
    );
    pickerRef.current.create();

    return () => {
      pickerRef.current?.destroy();
    };
  }, []);

  return (
    <>
      <input ref={inputRef} type="text" />
      {createPortal(
        <div ref={containerRef} />,
        document.body
      )}
    </>
  );
}

Iframe Integration

Use timepicker inside an iframe:

// Inside iframe document
import { TimepickerUI } from 'timepicker-ui';

const input = document.querySelector('#timepicker');
const iframeBody = document.body;

const picker = new TimepickerUI(input, {
  // Keep modal inside iframe
  appendModalSelector: iframeBody
});

picker.create();

// Or append to parent document (if same origin)
const parentContainer = window.parent.document.querySelector('#container');
const pickerToParent = new TimepickerUI(input, {
  appendModalSelector: parentContainer
});

Scoped Styles

Use custom container with scoped CSS:

import { TimepickerUI } from 'timepicker-ui';

// HTML:
// <div class="custom-scope" id="scoped-container">
//   <input id="timepicker" type="text" />
// </div>

const input = document.querySelector('#timepicker');
const picker = new TimepickerUI(input, {
  appendModalSelector: '#scoped-container',
  cssClass: 'scoped-picker'
});

picker.create();

// CSS:
// .custom-scope {
//   /* Container styles */
//   position: relative;
//   z-index: 100;
// }
//
// .custom-scope .timepicker-ui-modal {
//   /* Scoped modal styles */
//   position: absolute;
// }

Multiple Containers

Different pickers in different containers:

import { TimepickerUI } from 'timepicker-ui';

// Picker 1 in sidebar
const input1 = document.querySelector('#timepicker-1');
const picker1 = new TimepickerUI(input1, {
  appendModalSelector: '#sidebar-container'
});
picker1.create();

// Picker 2 in main content
const input2 = document.querySelector('#timepicker-2');
const picker2 = new TimepickerUI(input2, {
  appendModalSelector: '#main-content'
});
picker2.create();

// Picker 3 in modal
const input3 = document.querySelector('#timepicker-3');
const picker3 = new TimepickerUI(input3, {
  appendModalSelector: '#modal-dialog'
});
picker3.create();