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:

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

Disable Clear Button

Set ui.clearButton: false to hide it:

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

Clear Behavior Options

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

new TimepickerUI(input, {
  clearBehavior: {
    clearInput: false  // Keep the input value after clearing
  }
}).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:

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

Clear Event

Listen for the clear event via EventEmitter or callback:

EventEmitter

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

Callback option

new TimepickerUI(input, {
  callbacks: {
    onClear: (data) => {
      console.log('Cleared! Previous value:', data.previousValue);
    }
  }
}).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

import type {
  ClearEventData,
  ClearBehaviorOptions
} from 'timepicker-ui';

// ClearEventData: { previousValue: string }
// ClearBehaviorOptions: { clearInput: boolean }