Event Handling

Handle timepicker events using EventEmitter API or callbacks

EventEmitter API (Recommended)

The new EventEmitter API provides a clean, type-safe way to handle events:

const picker = new TimepickerUI(input);
picker.create();

picker.on('confirm', (data) => {
  console.log('Time confirmed:', data.hour, data.minutes);
});

picker.on('cancel', (data) => {
  console.log('Cancelled');
});

picker.on('open', () => {
  console.log('Picker opened');
});

picker.on('update', (data) => {
  console.log('Time updated:', data);
});

picker.on('select:hour', (data) => {
  console.log('Hour selected:', data.hour);
});

picker.on('select:minute', (data) => {
  console.log('Minute selected:', data.minutes);
});

picker.on('select:am', (data) => {
  console.log('AM selected');
});

picker.on('select:pm', (data) => {
  console.log('PM selected');
});

picker.once('confirm', (data) => {
  console.log('This runs only once');
});

const handler = (data) => console.log(data);
picker.on('confirm', handler);
picker.off('confirm', handler);

Callback Options

You can also use callback options (check console):

Select Time

Legacy DOM Events (Deprecated)

DOM events are deprecated and will be removed in v4. Please migrate to EventEmitter API:

// ❌ Deprecated (will be removed in v4)
input.addEventListener('timepicker:confirm', (e) => {
  console.log(e.detail);
});

// ✅ Recommended
picker.on('confirm', (data) => {
  console.log(data);
});

TypeScript Event Types

Event data interface for TypeScript:

interface CallbackData {
  hour?: string | null;
  minutes?: string | null;
  type?: string | null;
  degreesHours?: number | null;
  degreesMinutes?: number | null;
  hourNotAccepted?: string | null;
  minutesNotAccepted?: string | null;
  eventType?: any;
  error?: string;
  currentHour?: string | number;
  currentMin?: string | number;
  currentType?: string;
  currentLength?: string | number;
}

type EventHandler<T> = (data: T) => void;

const picker = new TimepickerUI(input);
picker.on('confirm', (data: CallbackData) => {
  console.log(data.hour, data.minutes);
});