timepicker-ui
4.7.0GitHub
timepicker-ui
GitHub4.7.0
Basic Examples / Getting Started

Getting Started

Simple examples to start using Timepicker-UI

Docs: InstallationQuick Start

Basic Usage

#

The simplest way to create a timepicker with default settings:

import { TimepickerUI } from 'timepicker-ui';


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

With Options

#

Add custom options to personalize your timepicker:

import { TimepickerUI } from 'timepicker-ui';


const input = document.querySelector('#timepicker-input');
const picker = new TimepickerUI(input, {
  ui: {
    theme: 'dark'
  },
  clock: {
    type: '24h'
  },
  labels: {
    ok: 'Confirm',
    cancel: 'Close'
  }
});


picker.create();

Event Handling

#

Listen to events and handle user interactions:

import { TimepickerUI } from 'timepicker-ui';


const input = document.querySelector('#timepicker-input');
const picker = new TimepickerUI(input, {
  callbacks: {
    onOpen: (data) => {
      console.log('Picker opened', data);
    },
    onConfirm: (data) => {
      console.log('Time selected:', data.hour, data.minutes, data.type);
    },
    onCancel: (data) => {
      console.log('Picker cancelled', data);
    }
  }
});


picker.create();

React Integration

#

Use timepicker in React applications with proper instance management:

index.ts
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(() => ({
    ui: { theme: 'basic' },
    clock: { type: '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:

index.ts
<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, {
      ui: { theme: 'basic' }
    });
    picker.create();
  }
});


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