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="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

Chameleon I.T are a client focused consultancy seeking to deliver IT efficiency gains through software and consulting solutions.

These solutions seek to take existing systems and optimise them in conjunction with adding cutting edge technologies to complement.

 

Map

Contact us

Phone:
01727 831 383
Email:
info@chameleonit.co.uk
Mon-Fri:
9am to 5pm

Search