anima-datetimepicker

anima-datetimepicker

---

轻量级的日期时间选择组件，基于 anima-scroller，支持Android 4.1+，iOS 6+。

安装

$ npm install anima-datetimepicker --save

截图

使用方法

var DatetimePicker = require('anima-datetimepicker');

// 使用 trigger
new DatetimePicker({
  trigger : '#id',
  format : 'YYYY-MM-DD'
});

// 定制输入和输出
var picker = new DatetimePicker({
  format : 'YYYY-MM-DD HH:II',
  onConfirm : function(value) {
    console.log(value);
  }
});
picker.show('2015-01-01 01:01');

配置说明

trigger String|Element

唤出控件的元素，可以是CSS3选择器或DOM元素。

output String|Element

初始值用 output 的值，完成后自动填充到 output 。

template String

设置模板，覆盖的时候不要缺少 data-role ，默认模板请查看源码。

format String

日期时间格式，用于输入和输出，支持以下格式的组合。

• 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

value String

默认日期时间字符串，必须和 format 匹配。

minuteStep Number

分钟步长，数字必须在 0 ~ 31 之间（在这个区间之外的数字则取边界值），默认无。

new DatetimePicker({
  minuteStep : 30
});

currentYear Number

界面里没有年份时使用，默认值为当前年份。

currentMonth Number

界面里没有月份时使用，默认值为当前月份。

minYear Number

最小年份，默认值为 2000 。

maxYear Number

最大年份，默认值为 2030 。

yearRow String

年份行模板，默认值为 {value}年 。

monthRow String

月份行模板，默认值为 {value}月 。

dayRow String

天数行模板，默认值为 {value}日 。

hourRow String

小时行模板，默认值为 {value}点 。

minuteRow String

分钟行模板，默认值为 {value}分 。

onSelect(type , value) Function

选中后执行的回调函数，type表示选中的列，总共有五种类型（year、month、day、hour、minute），value为选中的值。

new DatetimePicker({
  onSelect : function(type, value) {
    console.log(type, value);
  }
});

onConfirm(value) Function

完成后执行的回调函数， value 会按 format 格式化。

onShow Function

显示后时执行的回调函数。

onHide Function

隐藏后执行的回调函数。

实例方法

show([value])

显示控件。value为日期时间字符串，必须和 format 匹配。

hide()

隐藏控件。

destroy()

销毁控件，从DOM中移除。

find(selector)

查找组件内的DOM元素。

getValue()

返回当前选中的日期时间字符串。

confirm()

隐藏控件，触发 onConfirm 事件。回调函数返回false，控件继续保持打开状态。

select(type , value)

选中一个列，type表示选中的列，总共有五种类型（year、month、day、hour、minute），value为选中的值。