Example · Basic

Getting Started

Simple examples to start using Timepicker-UI

Basic Usage

The simplest way to create a timepicker with default settings:

Live

Select time

index.tstypescript

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

With Options

Add custom options to personalize your timepicker:

Live

Select time

index.tstypescript

1import { TimepickerUI } from 'timepicker-ui';
2
3const input = document.querySelector('#timepicker-input');
4const picker = new TimepickerUI(input, {
5  ui: {
6    theme: 'dark'
7  },
8  clock: {
9    type: '24h'
10  },
11  labels: {
12    ok: 'Confirm',
13    cancel: 'Close'
14  }
15});
16
17picker.create();

Event Handling

Listen to events and handle user interactions:

Live

Select time

index.tstypescript

1import { TimepickerUI } from 'timepicker-ui';
2
3const input = document.querySelector('#timepicker-input');
4const picker = new TimepickerUI(input, {
5  onOpen: (data) => {
6    console.log('Picker opened', data);
7  },
8  onConfirm: (data) => {
9    console.log('Time selected:', data.hour, data.minutes, data.type);
10  },
11  onCancel: (data) => {
12    console.log('Picker cancelled', data);
13  }
14});
15
16picker.create();

React Integration

Use timepicker in React applications with proper instance management:

index.tstypescript

1import { useEffect, useRef, useMemo } from 'react';
2import { TimepickerUI } from 'timepicker-ui';
3
4function TimePickerComponent() {
5  const inputRef = useRef<HTMLInputElement>(null);
6  const pickerRef = useRef<TimepickerUI | null>(null);
7
8  // Memoize options to prevent re-initialization on every render
9  const options = useMemo(() => ({
10    ui: { theme: 'basic' },
11    clock: { type: '12h' }
12  }), []);
13
14  useEffect(() => {
15    if (!inputRef.current) return;
16
17    // Create instance once
18    pickerRef.current = new TimepickerUI(inputRef.current, options);
19    pickerRef.current.create();
20
21    // Cleanup on unmount
22    return () => {
23      pickerRef.current?.destroy();
24    };
25  }, []); // Empty deps - initialize only once
26
27  return (
28    <input 
29      ref={inputRef}
30      type="text"
31      placeholder="Select time"
32    />
33  );
34}

Vue Integration

Use timepicker in Vue applications with proper cleanup:

index.tstypescript

1<template>
2  <input ref="timepickerInput" type="text" placeholder="Select time" />
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  if (timepickerInput.value) {
14    picker = new TimepickerUI(timepickerInput.value, {
15      ui: { theme: 'basic' }
16    });
17    picker.create();
18  }
19});
20
21onUnmounted(() => {
22  // Always cleanup on unmount
23  if (picker) {
24    picker.destroy();
25    picker = null;
26  }
27});
28</script>