Create a toggleable dropdown with an datepicker.


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.



<form class="uk-form">
    <input type="text" data-uk-datepicker="{format:'DD.MM.YYYY'}">

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 */ });


Name Parameter Description event On datepicker dropdown show event On datepicker dropdown hide event On calendar rendering

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

JFlickr Module