Options API Reference

1const picker = new TimepickerUI(input, {
2  ui: { theme: 'cyberpunk' }
3});

1const picker = new TimepickerUI(input, {
2  ui: {
3    inline: {
4      enabled: true,
5      container: '#timepicker-container', // selector or element
6      showButtons: false,  // Hide OK/Cancel buttons
7      autoUpdate: true     // Auto-update input on change
8    }
9  }
10});

1import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
2import { WheelPlugin } from 'timepicker-ui/plugins/wheel';
3
4PluginRegistry.register(WheelPlugin);
5
6const picker = new TimepickerUI(input, {
7  ui: { mode: 'compact-wheel' },
8  wheel: {
9    placement: 'bottom',     // Popover below the input; unset = modal
10    hideFooter: true,        // No OK/Cancel/Clear footer
11    commitOnScroll: true     // Commit value on scroll end
12  }
13});
14picker.create();

1// Lists
2const picker = new TimepickerUI(input, {
3  clock: {
4    disabledTime: {
5      hours: [1, 3, 5, 8],      // Disable specific hours
6      minutes: [15, 30, 45]     // Disable specific minutes
7    }
8  },
9  wheel: {
10    hideDisabled: true          // Hide disabled items instead of greying out (wheel modes only)
11  }
12});
13
14// Ranges (string or string[])
15const rangesPicker = new TimepickerUI(input, {
16  clock: {
17    disabledTime: {
18      ranges: ['10:00 AM - 12:00 PM', '5:00 PM - 8:00 PM']
19    }
20  }
21});

1// Current time, written to the input
2const picker = new TimepickerUI(input, {
3  clock: { defaultTime: 'now' }
4});
5
6// A fixed time, shown in the picker only
7const morningPicker = new TimepickerUI(input, {
8  clock: {
9    defaultTime: { time: new Date(2026, 0, 1, 9, 30), updateInput: false }
10  }
11});

1const picker = new TimepickerUI(input, {
2  // Clock options
3  clock: {
4    type: '24h',
5    incrementHours: 1,
6    incrementMinutes: 5,
7    autoSwitchToMinutes: true,
8    showSeconds: false,
9    disabledTime: {
10      ranges: ['00:00 - 03:59', '10:00 - 12:00']
11    },
12    defaultTime: 'now'
13  },
14
15  // UI options
16  ui: {
17    theme: 'dark',
18    animation: true,
19    backdrop: true,
20    initialView: 'clock',
21    allowPageScroll: false,
22    viewSwitch: false,
23    editable: false,
24    cssClass: 'custom-picker',
25    appendTo: '#timepicker-container',
26    clearButton: { clearInput: true }
27  },
28
29  // Wheel options (wheel / compact-wheel modes)
30  wheel: {
31    placement: 'bottom',
32    hideFooter: true,
33    commitOnScroll: true,
34    hideDisabled: true,
35    ignoreOutsideClick: false
36  },
37
38  // Labels options
39  labels: {
40    ok: 'Confirm',
41    cancel: 'Close',
42    clockTitle: 'Choose Time',
43    am: 'AM',
44    pm: 'PM',
45    keyboardTitle: 'Enter Time',
46    hour: 'Hour',
47    minute: 'Minute',
48    second: 'Second'
49  },
50
51  // Behavior options
52  behavior: {
53    focusTrap: true,
54    returnFocus: true,
55    delayHandler: 0,
56    id: 'my-timepicker'
57  },
58
59  // Callbacks options
60  callbacks: {
61    onConfirm: (data) => console.log('Confirmed:', data),
62    onCancel: () => console.log('Cancelled'),
63    onOpen: () => console.log('Opened'),
64    onUpdate: (data) => console.log('Updated:', data),
65    onSelectHour: (data) => console.log('Hour selected:', data.hour),
66    onSelectMinute: (data) => console.log('Minute selected:', data.minutes),
67    onSelectPeriod: (data) => console.log('Period selected:', data.type),
68    onSwitchFace: (data) => console.log('Face shown:', data.face),
69    onError: (data) => console.error('Error:', data.error)
70  }
71});