Feature

Clear Button

Reset time selection with a dedicated button in the picker footer

Available since v4.2.0

The clear button is enabled by default via ui.clearButton: true. It resets the clock hands to 12:00, disables the confirm button, and optionally empties the input value.

Basic Usage

The clear button appears automatically. No extra configuration needed:

index.tstypescript

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

Disable Clear Button

Set ui.clearButton: false to hide it:

index.tstypescript

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

Clear Behavior Options

Use clearBehavior to control what happens when the user clicks Clear:

index.tstypescript

1new TimepickerUI(input, {
2  clearBehavior: {
3    clearInput: false  // Keep the input value after clearing
4  }
5}).create();

Option	Type	Default	Description
`clearInput`	boolean	`true`	Whether clearing also empties the input field value

Custom Label

Customize the button text with labels.clear:

index.tstypescript

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

Clear Event

Listen for the clear event via EventEmitter or callback:

EventEmitter

index.tstypescript

1picker.on('clear', (data) => {
2  console.log('Cleared! Previous value:', data.previousValue);
3});

Callback option

index.tstypescript

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

Behavior Details

Clock hands reset to the 12:00 (neutral) position
Confirm (OK) button becomes disabled until a new time is selected
Clear button auto-disables when no time is selected
Screen reader announces "Time selection cleared" for accessibility

TypeScript Types

index.tstypescript

1import type {
2  ClearEventData,
3  ClearBehaviorOptions
4} from 'timepicker-ui';
5
6// ClearEventData: { previousValue: string }
7// ClearBehaviorOptions: { clearInput: boolean }