Without Animation

Disable animations for instant timepicker display

Disable Animation

With ui.animation: false the picker opens and closes at once, with no fade. When the system asks for reduced motion (prefers-reduced-motion), the picker does the same without this option.

Select time

1const picker = new TimepickerUI(input, {
2  ui: { animation: false }
3});
4picker.create();

Performance Mode

#

No fade and no backdrop. behavior.delayHandler is 0 by default, so the picker starts to close as soon as you press OK or Cancel. Set it only if you need an extra wait before closing.

Select time

1const picker = new TimepickerUI(input, {
2  ui: {
3    animation: false,
4    backdrop: false
5  }
6});
7picker.create();

No Animation with Theme

#

Disable animation while keeping theme styles:

Select time

1const picker = new TimepickerUI(input, {
2  ui: {
3    animation: false,
4    theme: 'cyberpunk',
5    backdrop: true
6  }
7});
8picker.create();

Accessibility First

#

Disable animations while maintaining accessibility features:

Select time

1const picker = new TimepickerUI(input, {
2  ui: {
3    animation: false,
4    backdrop: true
5  },
6  behavior: {
7    focusTrap: true,
8    returnFocus: true
9  }
10});
11picker.create();