Quick Start

<input id="timepicker" type="text" placeholder="Select time" />

import { TimepickerUI } from 'timepicker-ui';

const input = document.querySelector('#timepicker');
const picker = new TimepickerUI(input);
picker.create();

const picker = new TimepickerUI(input, {
  theme: 'dark',
  clockType: '24h',
  animation: true,
  backdrop: true,
  onConfirm: (data) => {
    console.log('Selected time:', data);
  }
});
picker.create();

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

export default function TimePicker() {
  const inputRef = useRef<HTMLInputElement>(null);
  const pickerRef = useRef<TimepickerUI | null>(null);

  // Memoize options to prevent re-initialization
  const options = useMemo(() => ({
    onConfirm: (data) => console.log('Time:', data)
  }), []);

  useEffect(() => {
    if (!inputRef.current) return;
    
    // Create instance only once
    pickerRef.current = new TimepickerUI(inputRef.current, options);
    pickerRef.current.create();
    
    // Cleanup on unmount
    return () => {
      pickerRef.current?.destroy();
    };
  }, []); // Empty deps - create only once

  return <input ref={inputRef} type="text" />;
}

<template>
  <input ref="timepickerInput" type="text" />
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { TimepickerUI } from 'timepicker-ui';

const timepickerInput = ref(null);
let picker = null; // Store instance outside reactive state

onMounted(() => {
  picker = new TimepickerUI(timepickerInput.value);
  picker.create();
});

onUnmounted(() => {
  // Always cleanup to prevent memory leaks
  picker?.destroy();
  picker = null;
});
</script>

import { Component, ElementRef, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
import { TimepickerUI } from 'timepicker-ui';

@Component({
  selector: 'app-timepicker',
  template: '<input #timepicker type="text" />'
})
export class TimepickerComponent implements AfterViewInit, OnDestroy {
  @ViewChild('timepicker') input: ElementRef;
  private picker: TimepickerUI;

  ngAfterViewInit() {
    this.picker = new TimepickerUI(this.input.nativeElement);
    this.picker.create();
  }

  ngOnDestroy() {
    this.picker?.destroy();
  }
}