Timepicker
Create a timepicker which can easily be used by selecting a time value from a pre filled dropdown.
Usage
To apply the timepicker, just add the data-uk-timepicker attribute to an <input> element. The timepicker will automatically display a pre filled dropdown on focus, which can be navigated by pressing the up or down button on the keyboard or by scrolling with the mouse.
IMPORTANT The timepicker component requires the Autocomplete component in order to work. Please make sure that you always include them together.
Example
Markup
<form class="uk-form">
<input type="text" data-uk-timepicker>
</form>Display meridian time
To display meridian time, just define the format option and set it to 12h
Example
Markup
<form class="uk-form">
<input type="text" data-uk-timepicker="{format:'12h'}">
</form>JavaScript options
This is an example of how to set options via data attribute:
data-uk-timepicker="{format:'12h'}"| Option | Possible value | Default | Description |
|---|---|---|---|
format |
’24h’ or ’12h’ | ’24h’ | Defines the preferred time notation |
start |
Integer between 0 and 24 | 0 | Start time |
end |
Integer between 0 and 24 | 24 | End time |
Init element manually
var timepicker = UIkit.timepicker(element, { /* options */ });