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

Phosfluorescently extend alternative potentialities before distinctive web services.

Professionally architect end-to-end ideas via multifunctional leadership skills. Conveniently underwhelm web-enabled.

Follow us on


Contact us

+32 222 3322
[email protected]
9am to 5pm