Use a time picker to let a user pick a single time value.


The time picker gives you a standardized way to let users pick a time value. To create timepicker add role with attribute data-role="timepicker" to input element.

                    <input data-role="timepicker">

Picker parts

The picker consists of three parts: hours, minutes and seconds. With attributes data-hours, data-minutes and data-seconds you can on/off each part. For disabled parts, the picker will generate zero value - 00.

                    <input data-role="timepicker" data-minutes="false" data-seconds="false">
                    <input data-role="timepicker" data-seconds="false">
                    <input data-role="timepicker" data-hours="false">

Labels & locale

You can on/off parts labels with attribute data-show-labels.

                    <input data-role="timepicker" data-show-labels="true">
                    <input data-role="timepicker" data-show-labels="false">

Also you can set locale for labels with attribute data-locale.

                    <input data-role="timepicker" data-locale="uk-UA">
                    <input data-role="timepicker" data-locale="de-DE">
                    <input data-role="timepicker" data-locale="hu-HU">

Picker value

By default picker get current time from system for init value. But you can set init time with attribute data-value. Also you can change attribute data-value at runtime to change real value for component. To get value you can read input value attribute or use special component methods.

                    <input data-role="timepicker" data-value="0">
                    <input data-role="timepicker" data-value="12:00">
                    <input data-role="timepicker" data-value="13:01:23">


When picker works, it generated a number of events. You can use callbacks to these events to interact with it.

Events Data-* Desc
onSet(val, elem_val, elem, picker) data-on-set Fired when value sets to picker
onOpen(val, elem, picker) data-on-open Fired when picker is open
onClose(val, elem, picker) data-on-close Fired when picker is close
onScroll(target, list, picker) data-on-scroll Fired when picker is scroll
onTimePickerCreate(elem, picker) data-on-time-picker-create Fired when picker was created


                    <input data-role="timepicker" data-on-set="console.log(arguments)">
                    <input data-role="timepicker" data-on-set="myLib.time.set">


                    var myLib = {
                        time: {
                            set: function(val){


To interact with component you can use picker methods.

Method Desc
open() Use this method to open picker scroller
close() Use this method to close picker scroller
val() Use this method to get picker value as string
val(t) Use this method to set picker value from string
time() Use this method to get picker value as object {h, m, s}
time(t) Use this method to set picker value from object {h, m, s}
date() Use this method to get picker value as datetime object
date(t) Use this method to set picker value from datetime object


You can use attribute data-distance to set scroller size.

                    <input data-role="timepicker" data-distance="1">
                    <input data-role="timepicker" data-distance="2">
                    <input data-role="timepicker" data-distance="3">

Also you can use attributes data-cls-picker, data-cls-part, data-cls-hours, data-cls-minutes, data-cls-seconds to set additional styles to picker. Values for these attributes must be valid css class.