Timepicker-UI

Events

Handle timepicker events using EventEmitter API or callbacks

EventEmitter API (Recommended)

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

on(event, handler)

Subscribe to an event. Handler is called every time the event fires.

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


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

once(event, handler)

Subscribe to an event that fires only once.

picker.once('open', () => {
  console.log('Opened for the first time');
});

off(event, handler)

Unsubscribe from an event.

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

Available Events

All events you can subscribe to:

confirm

Triggered when user confirms time selection.

picker.on('confirm', (data) => {
  console.log('Hour:', data.hour);
  console.log('Minutes:', data.minutes);
  console.log('Type:', data.type); // 'AM' or 'PM' (12h mode)
});

cancel

Triggered when user cancels or closes picker.

picker.on('cancel', (data) => {
  console.log('Cancelled');
  console.log('Not accepted:', data.hourNotAccepted, data.minutesNotAccepted);
});

open

Triggered when picker opens.

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

update

Triggered when time value changes during interaction.

picker.on('update', (data) => {
  console.log('Time updated:', data.hour, data.minutes);
  console.log('Degrees:', data.degreesHours, data.degreesMinutes);
});

select:hour

Triggered when hour is selected.

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

select:minute

Triggered when minute is selected.

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

select:am

Triggered when AM is selected (12h mode only).

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

select:pm

Triggered when PM is selected (12h mode only).

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

error

Triggered when validation error occurs.

picker.on('error', (data) => {
  console.error('Error:', data.error);
  console.log('Current values:', data.currentHour, data.currentMin);
});

Callback Options (Alternative)

You can also use callback options in the constructor:

onConfirm

Alternative: pass callback in options.

new TimepickerUI(input, {
  onConfirm: (data) => {
    console.log('Confirmed:', data);
  }
});

onCancel

Triggered when user cancels.

new TimepickerUI(input, {
  onCancel: (data) => {
    console.log('Cancelled');
  }
});

onOpen

Triggered when picker opens.

new TimepickerUI(input, {
  onOpen: () => {
    console.log('Opened');
  }
});

onUpdate

Triggered during time changes.

new TimepickerUI(input, {
  onUpdate: (data) => {
    console.log('Updated:', data);
  }
});

onSelectHour

Triggered when hour is selected.

new TimepickerUI(input, {
  onSelectHour: (data) => {
    console.log('Hour:', data.hour);
  }
});

onSelectMinute

Triggered when minute is selected.

new TimepickerUI(input, {
  onSelectMinute: (data) => {
    console.log('Minute:', data.minutes);
  }
});

onSelectAM

Triggered when AM is selected.

new TimepickerUI(input, {
  onSelectAM: (data) => {
    console.log('AM selected');
  }
});

onSelectPM

Triggered when PM is selected.

new TimepickerUI(input, {
  onSelectPM: (data) => {
    console.log('PM selected');
  }
});

onError

Triggered on validation error.

new TimepickerUI(input, {
  onError: (data) => {
    console.error('Error:', data.error);
  }
});

Legacy DOM Events (Deprecated)

⚠️ Deprecated - Will be removed in v4.0.0

DOM events (e.g., timepicker:confirm) are deprecated. Please migrate to the EventEmitter API shown above.

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


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

Event Data

Event callbacks receive data object with the following structure:

interface CallbackData {
  hour?: string | null;
  minutes?: string | null;
  type?: string | null;          // 'AM' or 'PM' (12h mode)
  degreesHours?: number | null;
  degreesMinutes?: number | null;
  hourNotAccepted?: string | null;     // For cancel events
  minutesNotAccepted?: string | null;  // For cancel events
  eventType?: any;               // Mouse/touch event type
  error?: string;                // Error message
  currentHour?: string | number;
  currentMin?: string | number;
  currentType?: string;
  currentLength?: string | number;
}

Complete Example

const picker = new TimepickerUI(input, {
  clockType: '12h',
  theme: 'dark'
});
picker.create();


// EventEmitter API (recommended)
picker.on('confirm', (data) => {
  console.log('Time confirmed:', data.hour, data.minutes, data.type);
  fetch('/api/save-time', {
    method: 'POST',
    body: JSON.stringify(data)
  });
});


picker.on('cancel', (data) => {
  console.log('User cancelled');
  console.log('Not accepted:', data.hourNotAccepted, data.minutesNotAccepted);
});


picker.on('update', (data) => {
  document.getElementById('display').textContent = 
    `${data.hour}:${data.minutes} ${data.type || ''}`;
});


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


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


picker.on('error', (data) => {
  console.error('Validation error:', data.error);
});


// One-time event
picker.once('open', () => {
  console.log('Picker opened for the first time');
});


// Remove event listener
const updateHandler = (data) => console.log(data);
picker.on('update', updateHandler);
picker.off('update', updateHandler);