anima-datetimepicker
轻量级的日期时间选择组件,基于 anima-scroller,支持Android 4.1+,iOS 6+。
安装
$ npm install anima-datetimepicker --save
截图
使用方法
var DatetimePicker = ; // 使用 trigger trigger : '#id' format : 'YYYY-MM-DD'; // 定制输入和输出var picker = format : 'YYYY-MM-DD HH:II' { console; };picker;
配置说明
String|Element
trigger 唤出控件的元素,可以是CSS3选择器或DOM元素。
String|Element
output 初始值用 output 的值,完成后自动填充到 output 。
String
template 设置模板,覆盖的时候不要缺少 data-role
,默认模板请查看源码。
String
format 日期时间格式,用于输入和输出,支持以下格式的组合。
- YYYY: 四位数年份,例如2015
- MM: 月份,固定两位数,01~12
- M: 月份,1~12
- DD: 天数,固定两位数,01~31
- D: 天数,1~12
- HH: 小时,固定两位数,00~23
- H: 小时,0~23
- II: 分钟,固定两位数,00~59
- I: 分钟,0~59
String
value 默认日期时间字符串,必须和 format 匹配。
Number
minuteStep 分钟步长,数字必须在 0 ~ 31 之间(在这个区间之外的数字则取边界值),默认无。
minuteStep : 30;
Number
currentYear 界面里没有年份时使用,默认值为当前年份。
Number
currentMonth 界面里没有月份时使用,默认值为当前月份。
Number
minYear 最小年份,默认值为 2000 。
Number
maxYear 最大年份,默认值为 2030 。
String
yearRow 年份行模板,默认值为 {value}年
。
String
monthRow 月份行模板,默认值为 {value}月
。
String
dayRow 天数行模板,默认值为 {value}日
。
String
hourRow 小时行模板,默认值为 {value}点
。
String
minuteRow 分钟行模板,默认值为 {value}分
。
Function
onSelect(type , value) 选中后执行的回调函数,type表示选中的列,总共有五种类型(year、month、day、hour、minute),value为选中的值。
{ console; };
Function
onConfirm(value) 完成后执行的回调函数, value 会按 format 格式化。
Function
onShow 显示后时执行的回调函数。
Function
onHide 隐藏后执行的回调函数。
实例方法
show([value])
显示控件。value为日期时间字符串,必须和 format 匹配。
hide()
隐藏控件。
destroy()
销毁控件,从DOM中移除。
find(selector)
查找组件内的DOM元素。
getValue()
返回当前选中的日期时间字符串。
confirm()
隐藏控件,触发 onConfirm 事件。回调函数返回false,控件继续保持打开状态。
select(type , value)
选中一个列,type表示选中的列,总共有五种类型(year、month、day、hour、minute),value为选中的值。