Migration Guide v3 to v4

1const timepicker = new TimepickerUI('#input', {
2  clockType: '12h',
3  amLabel: 'AM',
4  pmLabel: 'PM',
5  okLabel: 'OK',
6  cancelLabel: 'Cancel',
7  timeLabel: 'Select time',
8  animation: true,
9  backdrop: true,
10  theme: 'basic',
11  incrementHours: 1,
12  incrementMinutes: 5,
13  focusTrap: true,
14  delayHandler: 300,
15  mobile: false,
16  editable: false,
17  onOpen: (event) => console.log('opened', event),
18  onConfirm: (event) => console.log('confirmed', event),
19});

1const timepicker = new TimepickerUI('#input', {
2  clock: {
3    type: '12h',
4    incrementHours: 1,
5    incrementMinutes: 5,
6  },
7  ui: {
8    animation: true,
9    backdrop: true,
10    theme: 'basic',
11    initialView: 'clock',
12    editable: false,
13  },
14  labels: {
15    am: 'AM',
16    pm: 'PM',
17    ok: 'OK',
18    cancel: 'Cancel',
19    clockTitle: 'Select time',
20  },
21  behavior: {
22    focusTrap: true,
23    delayHandler: 300,
24  },
25  callbacks: {
26    onOpen: (event) => console.log('opened', event),
27    onConfirm: (event) => console.log('confirmed', event),
28  },
29});

1const options = timepicker.options;
2console.log(options.clockType); // '12h'
3console.log(options.amLabel); // 'AM'

1const options = timepicker.options;
2console.log(options.clock.type); // '12h'
3console.log(options.labels.am); // 'AM'

1timepicker.update({
2  options: {
3    clockType: '24h',
4    animation: false,
5  },
6});

1timepicker.setOptions({
2  clock: { type: '24h' },
3  ui: { animation: false },
4});

1import type {
2  TimepickerOptions,   // Main grouped options type
3  ClockOptions,        // Clock group
4  UIOptions,           // UI group
5  LabelsOptions,       // Labels group
6  BehaviorOptions,     // Behavior group
7  CallbacksOptions,    // Callbacks group
8} from 'timepicker-ui';
9
10const options: TimepickerOptions = {
11  clock: {
12    type: '12h',
13    incrementMinutes: 5,
14  },
15  ui: {
16    theme: 'basic',
17    animation: true,
18  },
19  labels: {
20    ok: 'Confirm',
21    cancel: 'Close',
22  },
23};
24
25const timepicker = new TimepickerUI('#input', options);

1// v4.0.0
2const timepicker = new TimepickerUI('#input', {
3  clock: { type: '12h' },
4});

1// v4.5
2const timepicker = new TimepickerUI('#input', {
3  clock: {
4    type: '24h',
5    incrementMinutes: 15,
6    disabledTime: {
7      ranges: ['00:00 - 06:00', '22:00 - 23:59'],
8    },
9  },
10  ui: {
11    theme: 'm3-green',
12    animation: true,
13    backdrop: true,
14    initialView: 'clock',
15    editable: true,
16  },
17  labels: {
18    clockTitle: 'Pick a time',
19    ok: 'Confirm',
20    cancel: 'Dismiss',
21  },
22  behavior: {
23    focusTrap: true,
24    delayHandler: 300,
25    returnFocus: true,
26  },
27  callbacks: {
28    onOpen: () => console.log('Opened'),
29    onConfirm: (data) => console.log('Time selected:', data),
30    onCancel: () => console.log('Cancelled'),
31  },
32});

1// v4.5
2const timepicker = new TimepickerUI('#input', {
3  ui: {
4    inline: {
5      enabled: true,
6      container: '#timepicker-container',
7      showButtons: false,
8      autoUpdate: true,
9    },
10  },
11  behavior: {
12    focusTrap: false, // Automatically set if not specified
13  },
14});