Example · Features

Editable Input

Name: timepicker-ui
Author: Piotr Glejzer

Allow manual input editing

Enable Editable

Allow users to manually type time:

Live

Select time

index.tstypescript

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

Editable with 24h

Live

Select time

index.tstypescript

1const picker = new TimepickerUI(input, {
2  ui: { editable: true },
3  clock: { type: '24h' }
4});
5picker.create();

Editable with Validation

Validate manually entered time with error callback:

Live

Select time

index.tstypescript

1const picker = new TimepickerUI(input, {
2  ui: { editable: true },
3  callbacks: {
4    onError: (data) => {
5      console.log('Invalid time:', data.error);
6    }
7  }
8});
9picker.create();