日期选择器
创建一个带有日期选择器的可切换下拉菜单。
用法
要创建一个日期选择器,只需将 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 |
事件 | 在日历渲染时 |