dtpicker组件适用于弹出日期选择器
通过new mui.DtPicker()初始化DtPicker组件
~~~
var dtPicker = new mui.DtPicker(options);
~~~
显示picker
~~~
dtPicker.show( SelectedItemsCallback )
~~~
实例
~~~
var dtPicker = new mui.DtPicker();
dtPicker.show(function (selectItems) {
console.log(selectItems.y);//{text: "2016",value: 2016}
console.log(selectItems.m);//{text: "05",value: "05"}
})
~~~
API详解
**new DtPicker({options}})**
~~~
1.参数:type
Type: JSON
设置日历初始视图模式
支持的值:
~~~
![](https://box.kancloud.cn/2016-07-18_578ce87dc1fc3.png)
*暂不支持指定其他视图,
如有特殊需求可在dtpicker.js中修改getSelected()方法中selected对象值
* * * * *
**2.参数:customData**
Type: JSON
设置时间/日期别名
设置格式:
~~~
"customData":{
"date":[
{value:"",text:""}
]
}
~~~
示例:
~~~
var dtpicker = new mui.DtPicker({
"type": "time",
"customData": {
"h": [
{
value: "am",
text: "上午"
}, {
value: "pm",
text: "下午"
},
]
}
})
dtpicker.show(function(e) {
console.log(e);
})
~~~
支持的值:
![](https://box.kancloud.cn/2016-07-18_578ce87dd8126.png)
*customData值生效的前提需要有指定的日期视图,如设置'y',需要在视图使用'年'视图
* * * * *
**3.参数:labels**
Type: Array
设置默认标签区域提示语
可设置["年", "月", "日", "时", "分"]这五个字段,
可以根据视图模式选择设置个别标签,也可以设置所有标签,
dtpicker显示的时候只会根据当前视图显示设置项,
*建议不要设置空字符串,会影响美观哦
* * * * *
**4.参数:beginDate**
Type: Date
设置可选择日期最小范围
可单独设置最小年范围, 如: beginYear:2015,
其他日期支持Date格式,如:new Date(2016,5)可指定最小月份6月
* * * * *
**5.参数:endDate**
Type: Date
设置可选择日期最大范围
可单独设置最大年范围, 如: endYear:2017,
其他日期支持Date格式,如:new Date(2016,10)可指定最大月份11月
* * * * *
完整示例:
~~~
var dtpicker = new mui.DtPicker({
type: "datetime",//设置日历初始视图模式
beginDate: new Date(2015, 04, 25),//设置开始日期
endDate: new Date(2016, 04, 25),//设置结束日期
labels: ['Year', 'Mon', 'Day', 'Hour', 'min'],//设置默认标签区域提示语
customData: {
h: [{
value: 'AM',
text: 'AM'
}, {
value: 'PM',
text: 'PM'
}]
}//时间/日期别名
})
dtpicker.show(function(e) {
console.log(e);
})
~~~
* * * * *
**getSelectedItems()**
返回值Date
Type: Date
获取选中的项
如: var iTems = dtPicker.getSelectedItems()
返回值:
如:
~~~
/*
* iTems.value 拼合后的 value
* iTems.text 拼合后的 text
* iTems.y 年,可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
* iTems.m 月,用法同年
* iTems.d 日,用法同年
* iTems.h 时,用法同年
* iTems.i 分(minutes 的第二个字母),用法同年
*/
~~~
**show( getSelectedItems )**
返回值:[data]
Type: Array
获取选中的项(数组)
如:
~~~
dtpicker.show(function(items) {
/*
* items.value 拼合后的 value
* items.text 拼合后的 text
* items.y 年,可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
* items.m 月,用法同年
* items.d 日,用法同年
* items.h 时,用法同年
* items.i 分(minutes 的第二个字母),用法同年
*/
console.log(items);
})
~~~
*return false; 可以阻止选择框的关闭
* * * * *
**hide()**
隐藏dtPicker
如:dtPicker.hide()
* * * * *
**dispose()**
释放组件资源(释放后将将不能再操作组件)
如:dtPicker.dispose()
* 通常情况下,不需要释放组件资源,初始化之后,可以一直使用。
* 当内容较多,如不释放组件资源,在某些设备上可能会卡顿。
* 所以每次用完便立即调用 dispose() 进行释放,下次用时再创建新实例。
*picker组件会触发webview硬件加速,在部分手机上可以能出现卡顿或变形的情况此时需要开启硬件加速,硬件加速请参考硬件加速章节
- mui
- 拓展
- 本地存储
- 获取时间
- 滚动帧听
- ui组件
- accordion(折叠面板)
- actionsheet(操作表)
- badge(数字角标)
- button(按钮)
- cardview(卡片视图)
- checkbox(复选框)
- dialog(对话框)
- 图片轮播
- 输入增强
- list(列表)
- 遮罩蒙版
- media list(图文列表)
- numbox(数字输入框)
- 侧滑导航
- 弹出菜单
- picker(选择器)
- popPicker
- dtpicker
- progressbar(滚动条)
- radio(单选框)
- range(滑块)
- scroll(区域滚动)
- slide(轮播组件)
- switch(开关)
- 手机底层
- 蜂鸣提示音和手机震动
- 设备信息
- 手机信息
- 电话
- 发送短信
- 消息框
- 浏览器打开网页
- 界面
- 手势
- 轮播组件
- 底部导航
- 打开新页面
- 遮罩
- webview详解
- js基础
- 数组
- mui教程
- 教程— html5+ webview 底部栏用法详解(二)(转载)
- 自动弹出虚拟键盘
- Native.js示例汇总