anima-datetimepicker

2.0.0 • Public • Published

anima-datetimepicker


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

安装

$ npm install anima-datetimepicker --save

截图

Screenshot

使用方法

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为选中的值。

Readme

Keywords

none

Package Sidebar

Install

npm i anima-datetimepicker

Weekly Downloads

2

Version

2.0.0

License

none

Last publish

Collaborators

  • jaredleechn
  • smbey0nd
  • yuanfei.gyf