Выпадающий список выбора даты

Создайте переключаемый выпадающий список выбора даты.

Использование

Чтобы создать указатель даты, просто добавьте атрибут data-uk-datepicker к элементу <input>. У вас также есть возможность настроить формат даты. Просто добавьте опцию format с необходимым значением к атирбуту data-uk-datepicker.

Компонент DatePicker определяет, загружается ли JavaScript из компонента Form select. Это позволит вам быстро переключаться между годами и месяцами с помощью выбора формы внутри datepicker.

Пример

Разметка

<form class="uk-form">
    <input type="text" data-uk-datepicker="{format:'DD.MM.YYYY'}">
</form>

Пример (русский)

JavaScript options

Это пример того, как установить параметры через атрибут:

data-uk-datepicker="{weekstart:0, format:'DD.MM.YYYY'}"

Option	Possible value	Default	Description
`weekstart`	integer (0..6)	1	Начало недели
`i18n`	JSON object	{ months:['January',...], weekdays:['Sun',..,'Sat'] }	Language string definitions
`format`	any combination of DD, MM and YYYY	'YYYY-MM-DD'	Строка формата даты
`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	Мин. дата
`maxDate`	bool (false to ignore the option) string (date as in `format`) integer (offset in days from current date)	false	Макс. дата
`pos`	'auto', 'top', 'bottom'	'auto'	Позиция 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

Добавляем компонент «Datepicker» к проекту

<link rel="stylesheet" href="/css/components/datepicker.min.css">
<link rel="stylesheet" href="/css/components/form-select.min.css">
<script src="/js/components/datepicker.min.js" async></script>
<script src="/js/components/form-select.min.js" async></script>