Example · Advanced

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.javascriptjavascript

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:am', (data) => {
29  console.log('AM selected');
30});
31
32picker.on('select:pm', (data) => {
33  console.log('PM selected');
34});
35
36picker.once('confirm', (data) => {
37  console.log('This runs only once');
38});
39
40const handler = (data) => console.log(data);
41picker.on('confirm', handler);
42picker.off('confirm', handler);

Callback Options

You can also use callback options (check console):

Live

Select time

index.tstypescript

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    onSelectAM: (data) => {
22      console.log('AM selected:', data);
23    },
24    onSelectPM: (data) => {
25      console.log('PM selected:', data);
26    },
27    onError: (data) => {
28      console.error('Error:', data.error);
29    }
30  }
31});
32picker.create();

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.javascriptjavascript

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

Event data interface for TypeScript:

index.tstypescript

1interface CallbackData {
2  hour?: string | null;
3  minutes?: string | null;
4  type?: string | null;
5  degreesHours?: number | null;
6  degreesMinutes?: number | null;
7  hourNotAccepted?: string | null;
8  minutesNotAccepted?: string | null;
9  eventType?: any;
10  error?: string;
11  currentHour?: string | number;
12  currentMin?: string | number;
13  currentType?: string;
14  currentLength?: string | number;
15}
16
17type EventHandler<T> = (data: T) => void;
18
19const picker = new TimepickerUI(input);
20picker.on('confirm', (data: CallbackData) => {
21  console.log(data.hour, data.minutes);
22});