# 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