Example · Basic

24h Format

Examples using 24-hour clock format (military time)

Basic 24h Format

Enable 24-hour format (no AM/PM):

Live

Select time

index.tstypescript

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

With Current Time

Initialize with current time in 24h format:

Live

Select time

index.tstypescript

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

Disabled Hours (24h)

Disable specific hours in 24h format (0-23):

Live

Select time

index.tstypescript

1const picker = new TimepickerUI(input, {
2  clock: {
3    type: '24h',
4    disabledTime: {
5      hours: [0, 1, 2, 3, 22, 23]
6    }
7  }
8});
9picker.create();

Time Range Restriction

Disable time ranges in 24h format:

Live

Select time

index.tstypescript

1const picker = new TimepickerUI(input, {
2  clock: {
3    type: '24h',
4    disabledTime: {
5      interval: '00:00 - 08:00'
6    }
7  }
8});
9picker.create();

With Hour Increments

Set hour increments in 24h format:

Live

Select time

index.tstypescript

1const picker = new TimepickerUI(input, {
2  clock: {
3    type: '24h',
4    incrementHours: 2,
5    incrementMinutes: 15
6  }
7});
8picker.create();