Getting Started

Simple examples to start using Timepicker-UI

Basic Usage

The simplest way to create a timepicker with default settings:

Select Time

With Options

Add custom options to personalize your timepicker:

Select Time

Event Handling

Listen to events and handle user interactions:

Select Time

React Integration

Use timepicker in React applications with proper instance management:

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

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

  // Memoize options to prevent re-initialization on every render
  const options = useMemo(() => ({
    theme: 'basic',
    clockType: '12h'
  }), []);

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

    // Create instance once
    pickerRef.current = new TimepickerUI(inputRef.current, options);
    pickerRef.current.create();

    // Cleanup on unmount
    return () => {
      pickerRef.current?.destroy();
    };
  }, []); // Empty deps - initialize only once

  return (
    <input 
      ref={inputRef}
      type="text"
      placeholder="Select time"
    />
  );
}

Vue Integration

Use timepicker in Vue applications with proper cleanup:

<template>
  <input ref="timepickerInput" type="text" placeholder="Select time" />
</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(() => {
  if (timepickerInput.value) {
    picker = new TimepickerUI(timepickerInput.value, {
      theme: 'basic'
    });
    picker.create();
  }
});

onUnmounted(() => {
  // Always cleanup on unmount
  if (picker) {
    picker.destroy();
    picker = null;
  }
});
</script>