Datepicker
Create a toggleable dropdown with an datepicker.
Usage
To create a datepicker, just add the data-uk-datepicker attribute to an <input> element. You also have the possibility of customizing the date format. Just add the format option to the data-uk-datepicker attribute.
The datepicker detects whether the JavaScript from the Form select component is being loaded. This allows you to quickly toggle between years and months through a select form inside the datepicker.
Example
Markup
<form class="uk-form">
<input type="text" data-uk-datepicker="{format:'DD.MM.YYYY'}">
</form>JavaScript options
This is an example of how to set options via attribute:
data-uk-datepicker="{weekstart:0, format:'DD.MM.YYYY'}"| Option | Possible value | Default | Description |
|---|---|---|---|
weekstart
|
integer (0..6) | 1 | Start of the week |
i18n
|
JSON object | { months:['January',...], weekdays:['Sun',..,'Sat'] } | Language string definitions |
format
|
any combination of DD, MM and YYYY | 'YYYY-MM-DD' | Date format string |
offsettop
|
integer | 5 | Offset to the input value |
minDate
|
bool (false to ignore the option)
string (date as in format)
integer (offset in days from current date) |
false | Min. date |
maxDate
|
bool (false to ignore the option)
string (date as in format)
integer (offset in days from current date) |
false | Max. date |
pos
|
'auto', 'top', 'bottom' | 'auto' | Position of the datepicker |
Init element manually
var datepicker = UIkit.datepicker(element, { /* options */ });Events
| Name | Parameter | Description |
|---|---|---|
show.uk.datepicker
|
event | On datepicker dropdown show |
hide.uk.datepicker
|
event | On datepicker dropdown hide |
update.uk.datepicker
|
event | On calendar rendering |
