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:

index.js

1const picker = new TimepickerUI(input);
2picker.create();
3
4picker.on('confirm', (data) => {
5  console.log('Time confirmed:', data.hour, data.minutes);
6});
7
8picker.on('cancel', (data) => {
9  console.log('Cancelled');
10});
11
12picker.on('open', () => {
13  console.log('Picker opened');
14});
15
16picker.on('update', (data) => {
17  console.log('Time updated:', data);
18});
19
20picker.on('select:hour', (data) => {
21  console.log('Hour selected:', data.hour);
22});
23
24picker.on('select:minute', (data) => {
25  console.log('Minute selected:', data.minutes);
26});
27
28picker.on('select:period', (data) => {
29  console.log('Period selected:', data.type);
30});
31
32picker.once('confirm', (data) => {
33  console.log('This runs only once');
34});
35
36const handler = (data) => console.log(data);
37picker.on('confirm', handler);
38picker.off('confirm', handler);

Callback Options

#

You can also use callback options (check console):

Select time

1const picker = new TimepickerUI(input, {
2  callbacks: {
3    onOpen: (data) => {
4      console.log('Opened:', data);
5    },
6    onConfirm: (data) => {
7      console.log('Confirmed:', data.hour, data.minutes, data.type);
8    },
9    onCancel: (data) => {
10      console.log('Cancelled:', data);
11    },
12    onUpdate: (data) => {
13      console.log('Updated:', data);
14    },
15    onSelectHour: (data) => {
16      console.log('Hour selected:', data.hour);
17    },
18    onSelectMinute: (data) => {
19      console.log('Minute selected:', data.minutes);
20    },
21    onSelectPeriod: (data) => {
22      console.log('Period selected:', data.type);
23    },
24    onError: (data) => {
25      console.error('Error:', data.error);
26    }
27  }
28});
29picker.create();

Range Change Log

#

range:change fires when the user changes the time of a range end. It carries the end that changed and both ends after the change. Open the picker and pick a time to fill the log. setRange() and the other API calls do not emit it. New in 4.7.0.

Select time range

1picker.on('range:change', ({ part, from, to }) => {
2  console.log('changed:', part, 'from:', from, 'to:', to);
3});

Legacy DOM Events (Removed in v4.0.0)

#

DOM events have been removed in v4.0.0. Use EventEmitter API or callback options instead:

index.js

1// REMOVED in v4.0.0 - No longer supported
2input.addEventListener('timepicker:confirm', (e) => {
3  console.log(e.detail);
4});
5
6// CORRECT - use the EventEmitter API
7picker.on('confirm', (data) => {
8  console.log(data);
9});
10
11// CORRECT - or use callback options
12const picker = new TimepickerUI(input, {
13  callbacks: {
14    onConfirm: (data) => {
15      console.log(data);
16    }
17  }
18});

TypeScript Event Types

#

Payload types are exported from timepicker-ui, and on() infers them from the event name:

index.ts

1import { TimepickerUI } from 'timepicker-ui';
2import type { ConfirmEventData, ErrorEventData } from 'timepicker-ui';
3
4// ConfirmEventData:
5// {
6//   hour?: string;
7//   minutes?: string;
8//   seconds?: string;      // only with clock.showSeconds
9//   type?: string;         // 'AM' or 'PM' in 12h mode
10//   autoCommit?: boolean;  // true when wheel.commitOnScroll confirmed it
11// }
12
13const picker = new TimepickerUI(input);
14picker.create();
15
16// data is typed from the event name
17picker.on('confirm', (data) => {
18  console.log(data.hour, data.minutes, data.type);
19});
20
21// or name the payload type yourself
22const handleError = (data: ErrorEventData) => {
23  console.error(data.error);
24};
25picker.on('error', handleError);
26
27const handleConfirm = (data: ConfirmEventData) => {
28  console.log(data.hour, data.minutes);
29};
30picker.on('confirm', handleConfirm);