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

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

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

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

Компонент DatePicker определяет, загружается ли JavaScript из компонента Form select. Это позволит вам быстро переключаться между годами и месяцами через "форму выбора" *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>