Quick Start

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

1import { TimepickerUI } from 'timepicker-ui';
2
3const input = document.querySelector('#timepicker');
4const picker = new TimepickerUI(input);
5picker.create();

1const picker = new TimepickerUI(input, {
2  ui: {
3    theme: 'dark',
4    animation: true,
5    backdrop: true
6  },
7  clock: {
8    type: '24h'
9  },
10  callbacks: {
11    onConfirm: (data) => {
12      console.log('Selected time:', data);
13    }
14  }
15});
16picker.create();

1import { useEffect, useRef, useMemo } from 'react';
2import { TimepickerUI } from 'timepicker-ui';
3
4export default function TimePicker() {
5  const inputRef = useRef<HTMLInputElement>(null);
6  const pickerRef = useRef<TimepickerUI | null>(null);
7
8  // Memoize options to prevent re-initialization
9  const options = useMemo(() => ({
10    callbacks: {
11      onConfirm: (data) => console.log('Time:', data)
12    }
13  }), []);
14
15  useEffect(() => {
16    if (!inputRef.current) return;
17    
18    // Create instance only once
19    pickerRef.current = new TimepickerUI(inputRef.current, options);
20    pickerRef.current.create();
21    
22    // Cleanup on unmount
23    return () => {
24      pickerRef.current?.destroy();
25    };
26  }, []); // Empty deps - create only once
27
28  return (
29    <div className="tp-ui">
30      <input ref={inputRef} type="text" />
31    </div>
32  );
33}

1<template>
2  <input ref="timepickerInput" type="text" />
3</template>
4
5<script setup>
6import { ref, onMounted, onUnmounted } from 'vue';
7import { TimepickerUI } from 'timepicker-ui';
8
9const timepickerInput = ref(null);
10let picker = null; // Store instance outside reactive state
11
12onMounted(() => {
13  picker = new TimepickerUI(timepickerInput.value);
14  picker.create();
15});
16
17onUnmounted(() => {
18  // Always cleanup to prevent memory leaks
19  picker?.destroy();
20  picker = null;
21});
22</script>

1import { Component, ElementRef, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
2import { TimepickerUI } from 'timepicker-ui';
3
4@Component({
5  selector: 'app-timepicker',
6  template: '<input #timepicker type="text" />'
7})
8export class TimepickerComponent implements AfterViewInit, OnDestroy {
9  @ViewChild('timepicker') input: ElementRef;
10  private picker: TimepickerUI;
11
12  ngAfterViewInit() {
13    this.picker = new TimepickerUI(this.input.nativeElement);
14    this.picker.create();
15  }
16
17  ngOnDestroy() {
18    this.picker?.destroy();
19  }
20}

1<script>
2  import { onMount } from 'svelte';
3  import { TimepickerUI } from 'timepicker-ui';
4  import 'timepicker-ui/index.css';
5
6  let input;
7
8  onMount(() => {
9    const picker = new TimepickerUI(input);
10    picker.create();
11    return () => picker.destroy();
12  });
13</script>
14
15<input bind:this={input} type="text" />