Clear Button

Reset time selection with a dedicated button in the picker footer

Available since v4.2.0

The clear button is off by default. Turn it on with ui.clearButton: true. It resets the clock hands to 12:00, disables the confirm button, and optionally empties the input value.

Basic Usage

#

Set ui.clearButton: true to show the button:

index.ts

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

Disable Clear Button

#

ui.clearButton is false by default. Leave it out, or set it to false, to hide the button:

index.ts

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

Clear Behavior Options

#

Pass an object to ui.clearButton to control what happens when the user clicks Clear. The object form also shows the button. It is new in 4.5.0 and replaces clearBehavior.clearInput, which still works until 5.0:

index.ts

1new TimepickerUI(input, {
2  ui: {
3    clearButton: { 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.ts

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

Clear Event

#

Listen for the clear event via EventEmitter or callback:

EventEmitter

index.ts

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

Callback option

index.ts

1new TimepickerUI(input, {
2  ui: { clearButton: true },
3  callbacks: {
4    onClear: (data) => {
5      console.log('Cleared! Previous value:', data.previousValue);
6    }
7  }
8}).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 cleared" (labels.announceCleared) for accessibility

TypeScript Types

#

index.ts

1import type { ClearEventData, UIOptions } from 'timepicker-ui';
2
3// ClearEventData: { previousValue: string | null }
4// UIOptions['clearButton']: boolean | { clearInput?: boolean }