Backdrop

Control backdrop overlay behavior

With Backdrop (Default)

Backdrop is enabled by default and darkens the background:

Select time

1const picker = new TimepickerUI(input, {
2  ui: { backdrop: true } // This is the default
3});
4picker.create();

Without Backdrop

#

Disable backdrop to keep background visible:

Select time

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

Backdrop with Scroll

#

Let the page scroll while the backdrop is visible:

Select time

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

Backdrop with Focus Trap

#

Combine backdrop with focus trap for better accessibility:

Select time

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

No Backdrop, No Animation

#

Minimal setup without backdrop and animations:

Select time

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