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.