Example · Basic

Backdrop

Control backdrop overlay behavior

With Backdrop (Default)

Backdrop is enabled by default and darkens the background:

Live

Select time

index.tstypescript

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

Without Backdrop

Disable backdrop to keep background visible:

Live

Select time

index.tstypescript

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

Backdrop with Scroll

Enable scrollbar while backdrop is visible:

Live

Select time

index.tstypescript

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

Backdrop with Focus Trap

Combine backdrop with focus trap for better accessibility:

Live

Select time

index.tstypescript

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

No Backdrop, No Animation

Minimal setup without backdrop and animations:

Live

Select time

index.tstypescript

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