Datepicker

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'}"
OptionPossible valueDefaultDescription
weekstartinteger (0..6)1Start of the week
i18nJSON object{ months:[‘January’,…], weekdays:[‘Sun’,..,’Sat’] }Language string definitions
formatany combination of DD, MM and YYYY‘DD.MM.YYYY’Date format string
offsettopinteger5Offset to the input value
minDatebool (false to ignore the option)
string (date as in format)
integer (offset in days from current date)
falseMin. date
maxDatebool (false to ignore the option)
string (date as in format)
integer (offset in days from current date)
falseMax. date
pos‘auto’, ‘top’, ‘bottom’‘auto’Position of the datepicker

Init element manually

var datepicker = UIkit.datepicker(element, { /* options */ });

Events

NameParameterDescription
show.uk.datepickereventOn datepicker dropdown show
hide.uk.datepickereventOn datepicker dropdown hide
update.uk.datepickereventOn calendar rendering