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="" 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	‘DD.MM.YYYY’	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