mui中dtpicker组件--弹出⽇期选择器（移动端滑动⽇历）dtpicker组件适⽤于弹出⽇期选择器，使⽤dtpicker组件必须要引⼊ mui.min.js、mui.min.css、mui.picker.min.css、mui.picker.min.js。
【1】1. 通过 new mui.DtPicker() 初始化DtPicker组件
var dtPicker = new mui.DtPicker(options)
【2】显⽰picker
dtPicker.show( SelectedItemsCallback )
【3】实例
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，类型: JSON，设置⽇历初始视图模式。
可选值视图模式
'datetime'完整⽇期视图(年⽉⽇时分)
'date'年视图(年⽉⽇)
mui框架常用组件有哪些
'time'时间视图(时分)
'month'⽉视图(年⽉)
'hour'时视图(年⽉⽇时)
*若需要指定其他显⽰视图,
则需要通过css来控制显⽰项，通过js获取对应选择项。如设置⽉⽇时，需要在mui.dtpicker.css中设置显⽰视图宽度，隐藏不需要的视图。/*⽉⽇时*/
[data-type="day"] .mui-picker,
[data-type="day"] .mui-dtpicker-title h5 {
width: 33.3%;
}
[data-type="day"] [data-id="picker-i"],
[data-type="day"] [data-id="title-i"],[data-type="day"] [data-id="picker-y"],
[data-type="day"] [data-id="title-y"]  {
display: none;
}
在mui.dtpicker.js中getSelected()⽅法下添加selected对象值
case'day':
selected.value = value + '-' + selected.d.value + ' ' + selected.h.value;
< = + '-' + + ' ' + ;
break;
(2) 参数：customData，类型: JSON，设置时间/⽇期别名。
设置格式:
"customData":{
"date":[
{value:"",text:""}
]
}
⽀持的值:
可选值视图模式
'y'可设置别名
'm'可设置别名
'd'可设置别名
'h'可设置别名
'i'可设置别名
*customData值⽣效的前提需要有指定的⽇期视图，如设置'y'，需要在视图使⽤'年'视图
⽰例
// mui.init();
var dtpicker = new mui.DtPicker({
"type": "time",
"customData": {
"h": [
{ value: "am", text: "上午" },
{ value: "pm", text: "下午" },
]
}
})
dtpicker.show(function(e) {
console.log(e);
})
}
效果图
(3) 参数：labels，类型: Array，设置默认标签区域提⽰语。
可设置["年", "⽉", "⽇", "时", "分"]这五个字段，可以根据视图模式选择设置个别标签，也可以设置所有标签，dtpicker显⽰的时候只会根据当前视图显⽰设置项。
*建议不要设置空字符串，会影响美观哦
(4) 参数：beginDate，类型: Date，设置可选择⽇期最⼩范围。
可单独设置最⼩年范围，如: beginYear: 2015，其他⽇期⽀持Date格式，如:new Date(2016,5)可指定最⼩⽉份6⽉。
(5) 参数：endDate，类型: 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，类型: Date
获取选中的项如: var iTems = SelectedItems()
返回值，如:
*iTems.value 拼合后的 value *
* 拼合后的 text
* iTems.y 年，可以通过 rs.y.vaue 和 获取值和⽂本
* iTems.m ⽉，⽤法同年
* iTems.d ⽇，⽤法同年
* iTems.h 时，⽤法同年
* iTems.i 分（minutes 的第⼆个字母），⽤法同年
show( getSelectedItems )
返回值:[data]，类型: Array，获取选中的项（数组）
如:
dtpicker.show(function(items) {
/* * items.value 拼合后的 value
* 拼合后的 text
* items.y 年，可以通过 rs.y.vaue 和 获取值和⽂本
* items.m ⽉，⽤法同年
* items.d ⽇，⽤法同年
* items.h 时，⽤法同年
* items.i 分（minutes 的第⼆个字母），⽤法同年
*/
console.log(items);
})
*return false; 可以阻⽌选择框的关闭
hide()
隐藏dtPicker
如: dtPicker.hide()
dispose()
如: dtPicker.dispose()
* 通常情况下，不需要释放组件资源，初始化之后，可以⼀直使⽤。
* 当内容较多，如不释放组件资源，在某些设备上可能会卡顿。
* 所以每次⽤完便⽴即调⽤ dispose() 进⾏释放，下次⽤时再创建新实例。
实例
【1】默认显⽰全部年⽉⽇时分
var dtPicker01 = new mui.DtPicker();
dtPicker01.show(function (selectItems) {
console.log(selectItems.y);//结果为：{text: "2016",value: 2016}
console.log(selectItems.m);//结果为：{text: "05",value: "05"}
console.log();//11
console.log();//09
console.log();//09
console.);//结果为：2016-10-11 09:09
};
打印 selectItems 的结果
【2】控制type参数，可修改默认的显⽰
var dtPicker02 = new mui.DtPicker({
'type' : 'hour'
});
dtPicker02.show(function(selectItems){
console.);//2016-10-11
};
【3】可⾃定每⼀项，⽐如⾃定义时、分
//可⾃定每⼀项，⽐如⾃定义时、分
var dtpicker = new mui.DtPicker({
"type": "hour",
"customData": {
"h": [
{ value: "am", text: "上午" },
{ value: "pm", text: "下午" },
]
,
"i": [
{ value: "q", text: "10"},
{ value: "w", text: "20"},
{ value: "e", text: "30"},
{ value: "r", text: "40"},
{ value: "t", text: "50"},
{ value: "y", text: "59"}
]
}
});
dtpicker.show(function(e) {
console.log();//结果为当前设置的多少分
console.);//结果为 2016-10-10 上午:10
});
};
【4】⼿动设置起⽌时间

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。