Example · Features

Smooth Hour Snap

Enable fluid hour dragging with smooth snapping animation

Smooth Hour Dragging

Drag the clock hand smoothly between hours (like minutes), with animated snap on release:

Live

Select time

index.tstypescript

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

Works perfectly with 24-hour clock format:

Live

Select time

index.tstypescript

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

Combine with hour increments for flexible selection:

Live

Select time

index.tstypescript

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

Clock hand jumps directly to each hour

Live

Select time

index.tstypescript

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

Clock hand drags fluidly, snaps on release

Live

Select time

index.tstypescript

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