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
Published
July 4, 2019

Leave a comment