日期选择器

创建一个带有日期选择器的可切换下拉菜单。

用法

要创建一个日期选择器,只需将 data-uk-datepicker 属性添加到 <input> 元素即可。 您还可以自定义日期格式。只需将 format 选项添加到 data-uk-datepicker 属性。

日期选择器会检测是否加载了表单选择组件的 JavaScript。 这允许您通过日期选择器内的选择表单在年份和月份之间快速切换。

示例

标记

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

JavaScript 选项

这是一个如何通过属性设置选项的示例

data-uk-datepicker="{weekstart:0, format:'DD.MM.YYYY'}"
选项 可能的值 默认值 描述
weekstart 整数 (0..6) 1 一周的开始
i18n JSON 对象 { months:['January',...], weekdays:['Sun',..,'Sat'] } 语言字符串定义
format DD、MM 和 YYYY 的任意组合 'YYYY-MM-DD' 日期格式字符串
offsettop 整数 5 输入值的偏移量
minDate 布尔值(false 表示忽略该选项)
字符串(格式为 format 的日期)
整数(与当前日期的天数偏移量)
false 最小日期
maxDate 布尔值(false 表示忽略该选项)
字符串(格式为 format 的日期)
整数(与当前日期的天数偏移量)
false 最大日期
pos 'auto'、'top'、'bottom' 'auto' 日期选择器的位置

手动初始化元素

var datepicker = UIkit.datepicker(element, { /* options */ });

事件

名称 参数 描述
show.uk.datepicker 事件 在显示日期选择器下拉菜单时
hide.uk.datepicker 事件 在隐藏日期选择器下拉菜单时
update.uk.datepicker 事件 在日历渲染时