Timepicker

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

About

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">

Events

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


                    html:

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

                    javascript:

                    var myLib = {
                        time: {
                            set: function(val){
                                console.log(val);
                            }
                        }
                    }

Methods

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

Customize

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.

Table of contents