Example · Features

Current Time

Initialize with current time

Simple Current Time

Set to true to use current time:

Live

Select time

index.tstypescript

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

Update Input with Current Time

Automatically set input value to current time:

Live

Select time

index.tstypescript

1const picker = new TimepickerUI(input, {
2  clock: {
3    currentTime: {
4      updateInput: true,
5      time: new Date()
6    }
7  }
8});
9picker.create();

With Locale

Use specific locale for time formatting:

Live

Select time

index.tstypescript

1const picker = new TimepickerUI(input, {
2  clock: {
3    currentTime: {
4      updateInput: true,
5      time: new Date(),
6      locales: 'en-US'
7    }
8  }
9});
10picker.create();

Prevent Clock Type

Force clock type based on locale:

Live

Select time

index.tstypescript

1const picker = new TimepickerUI(input, {
2  clock: {
3    currentTime: {
4      updateInput: true,
5      time: new Date(),
6      preventClockType: true
7    }
8  }
9});
10picker.create();

Custom Time

Set specific time instead of current:

Live

Select time

index.tstypescript

1const customTime = new Date();
2customTime.setHours(14, 30, 0);
3
4const picker = new TimepickerUI(input, {
5  clock: {
6    currentTime: {
7      updateInput: true,
8      time: customTime
9    }
10  }
11});
12picker.create();