Example · Features

Clear Button

Reset time selection with a dedicated clear button

Default (Enabled)

The clear button is enabled by default in all pickers:

Live

Select time

index.tstypescript

1const picker = new TimepickerUI(input);
2picker.create();
3// Clear button is visible by default

Disabled Clear Button

Hide the clear button:

Live

Select time

index.tstypescript

1new TimepickerUI(input, {
2  ui: { clearButton: false }
3}).create();

Keep Input Value on Clear

Clear the clock state but keep the input value:

Live

Select time

index.tstypescript

1new TimepickerUI(input, {
2  clearBehavior: { clearInput: false }
3}).create();

Custom Label

Use a custom label for the clear button:

Live

Select time

index.tstypescript

1new TimepickerUI(input, {
2  labels: { clear: 'Reset' }
3}).create();

With Clear Callback

Handle the clear event via callback:

Live

Select time

index.tstypescript

1new TimepickerUI(input, {
2  callbacks: {
3    onClear: (data) => {
4      console.log('Cleared! Previous:', data.previousValue);
5    }
6  }
7}).create();