Clear Button

Reset time selection with a dedicated clear button

Enable Clear Button

The clear button is off by default. Turn it on with ui.clearButton: true:

Select time

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

Disabled Clear Button

#

Hide the clear button (this is the default):

Select time

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

Keep Input Value on Clear

#

Clear the clock state but keep the input value, with the object form of ui.clearButton:

Select time

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

Custom Label

#

Use a custom label for the clear button:

Select time

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

Clear from Code

#

picker.clear() works with the button hidden, open or closed. It emits clear, makes no screen reader announcement and does not move focus. New in 4.7.0.

Select time

1const picker = new TimepickerUI(input, {
2  clock: { type: '24h' }
3});
4picker.create();
5
6picker.on('clear', ({ previousValue }) => {
7  console.log('Cleared, previous:', previousValue);
8});
9
10resetButton.addEventListener('click', () => picker.clear());

With Clear Callback

#

Handle the clear event via callback:

Select time

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