Example · Features

Seconds

Pick hours, minutes and seconds with clock.showSeconds. Full reference on the Seconds docs page.

Version

Seconds need timepicker-ui 4.5.0 or later.

Clock with Seconds (12h)

Pick an hour, then a minute. The face then switches to seconds. The value looks like 02:30:15 PM.

Live

Select time

index.tstypescript

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

24h with a 5-Second Step

incrementSeconds sets the step on the seconds face and the keyboard. The value looks like 14:30:15.

Live

Select time

index.tstypescript

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

No Auto-Switch to Seconds

With autoSwitchToSeconds: false, the face stays on minutes. Click the seconds field in the header to set seconds.

Live

Select time

index.tstypescript

1const picker = new TimepickerUI(input, {
2  clock: {
3    showSeconds: true,
4    autoSwitchToSeconds: false
5  }
6});
7picker.create();

Wheel with Seconds

Three columns: hours, minutes and seconds.

Live

Select time

index.tstypescript

1import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
2import { WheelPlugin } from 'timepicker-ui/plugins/wheel';
3
4PluginRegistry.register(WheelPlugin);
5
6const picker = new TimepickerUI(input, {
7  ui: { mode: 'wheel' },
8  clock: { showSeconds: true }
9});
10picker.create();

Compact Wheel Popover with Seconds

Columns HH : MM : SS in a popover. With placement: 'auto' it opens below the input when there is room, otherwise above.

Live

Select time

index.tstypescript

1import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
2import { WheelPlugin } from 'timepicker-ui/plugins/wheel';
3
4PluginRegistry.register(WheelPlugin);
5
6const picker = new TimepickerUI(input, {
7  ui: { mode: 'compact-wheel' },
8  clock: { type: '24h', showSeconds: true, incrementSeconds: 5 },
9  wheel: { placement: 'auto' }
10});
11picker.create();

Disabled Seconds

disabledTime.seconds blocks the same seconds in every minute. Here :55 to :59 cannot be picked.

Live

Select time

index.tstypescript

1const picker = new TimepickerUI(input, {
2  clock: {
3    showSeconds: true,
4    disabledTime: {
5      seconds: [55, 56, 57, 58, 59]
6    }
7  }
8});
9picker.create();

Disabled Range with Seconds

Blocks 10:00:30 AM up to and including 10:05:59 AM. Minute 10:00 stays selectable for seconds :00 to :29.

Live

Select time

index.tstypescript

1const picker = new TimepickerUI(input, {
2  clock: {
3    type: '12h',
4    showSeconds: true,
5    disabledTime: {
6      ranges: '10:00:30 AM - 10:05 AM'
7    }
8  }
9});
10picker.create();

Range with Seconds

range:confirm carries durationSeconds. minDuration stays in minutes but is compared to the second, so this range must be at least 60 seconds long.

Live

Select time

index.tstypescript

1import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
2import { RangePlugin } from 'timepicker-ui/plugins/range';
3
4PluginRegistry.register(RangePlugin);
5
6const picker = new TimepickerUI(input, {
7  clock: { type: '24h', showSeconds: true },
8  range: { enabled: true, minDuration: 1 },
9  callbacks: {
10    onRangeConfirm: (data) => {
11      console.log(data.from, data.to, data.durationSeconds);
12    }
13  }
14});
15picker.create();

Keyboard View

Three editable fields, each with a caption. The captions here are in Polish. The seconds caption comes from labels.second.

Live

Select time

index.tstypescript

1const picker = new TimepickerUI(input, {
2  ui: { initialView: 'keyboard' },
3  clock: { type: '24h', showSeconds: true },
4  labels: {
5    keyboardTitle: 'Wpisz godzinę',
6    hour: 'Godzina',
7    minute: 'Minuta',
8    second: 'Sekunda',
9    cancel: 'Anuluj'
10  }
11});
12picker.create();