Guide

Quick Start

Get up and running with Timepicker-UI in minutes

Basic Usage

Create a simple time picker with default settings:

HTML

index.htmlhtml

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

JavaScript

index.tstypescript

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

With Options

Customize the picker with options (v4.0.0 grouped structure):

index.tstypescript

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();

Framework Integration

React

Important for React

Use useRef to store the picker instance and avoid re-initialization on every render. If you pass options as an object, memoize them with useMemo to prevent unnecessary re-renders.

index.tsxtsx

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 <input ref={inputRef} type="text" />;
29}

Vue

index.vuevue

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>

Angular

index.tstypescript

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}

Pro tip

Always call destroy() when unmounting to prevent memory leaks. In React, use useMemo for options objects to avoid re-initialization on every render.