dtpicker组件适用于弹出日期选择器,使用dtpicker组件必须要引入 mui.min.js、mui.min.css、mui.picker.min.css、mui.picker.min.js。
【1】1.通过 newmui.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详解
newDtPicker({options}})
(1) 参数:type,类型:JSON,设置日历初始视图模式。
可选值 | 视图模式 |
---|---|
'datetime' | 完整日期视图(年月日时分) |
'date' | 年视图(年月日) |
'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 = selected.m.value + '-' + selected.d.value + ' ' + selected.h.value; selected.text = selected.m.text + '-' + selected.d.text + ' ' + selected.h.text; break;
(2) 参数:customData,类型:JSON,设置时间/日期别名。
设置格式:
"customData":{ "date":[ {value:"",text:""} ] }
支持的值:
可选值 | 视图模式 |
---|---|
'y' | 可设置年别名 |
'm' | 可设置月别名 |
'd' | 可设置日别名 |
'h' | 可设置时别名 |
'i' | 可设置分别名 |
*customData值生效的前提需要有指定的日期视图,如设置'y',需要在视图使用'年'视图
示例
// mui.init(); document.getElementById('date01').onclick = function(){ 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格式,如:newDate(2016,5)可指定最小月份6月。
(5) 参数:endDate,类型:Date,设置可选择日期最大范围。
可单独设置最大年范围,如:endYear:2017,其他日期支持Date格式,如:newDate(2016,10)可指定最大月份11月。
实例
document.getElementById('date01').onclick = function(){ 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
获取选中的项如:variTems=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],类型: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); })
*returnfalse;可以阻止选择框的关闭
hide()
隐藏dtPicker
如: dtPicker.hide()
dispose()
如: dtPicker.dispose()
*通常情况下,不需要释放组件资源,初始化之后,可以一直使用。
*当内容较多,如不释放组件资源,在某些设备上可能会卡顿。
*所以每次用完便立即调用dispose()进行释放,下次用时再创建新实例。
实例
【1】默认显示全部年月日时分
document.getElementById('datebox01').onclick = function(){ 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(selectItems.d.text);//11 console.log(selectItems.h.text);//09 console.log(selectItems.i.text);//09 console.log(selectItems.text);//结果为:2016-10-11 09:09 document.getElementById('datebox01').getElementsByTagName('span')[0].innerText = '-- '+selectItems.text }); };
打印 selectItems 的结果
【2】控制type参数,可修改默认的显示
document.getElementById('datebox02').onclick = function(){ var dtPicker02 = new mui.DtPicker({ 'type' : 'hour' }); dtPicker02.show(function(selectItems){ console.log(selectItems.text);//2016-10-11 document.getElementById('datebox02').getElementsByTagName('span')[0].innerText = '-- '+selectItems.text }); };
【3】可自定每一项,比如自定义时、分
document.getElementById('datebox03').onclick = function(){ //可自定每一项,比如自定义时、分 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(e.i.text);//结果为当前设置的多少分 console.log(e.text);//结果为 2016-10-10 上午:10 document.getElementById('datebox03').getElementsByTagName('span')[0].innerText = '-- '+e.text }); };
【4】手动设置起止时间
document.getElementById('datebox04').onclick = function(){ //手动设置起止时间 var dtpicker = new mui.DtPicker({ type: "datetime",//设置日历初始视图模式 beginDate: new Date(2015, 00, 01),//设置开始日期 --月份:索引是0; 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); document.getElementById('datebox04').getElementsByTagName('span')[0].innerText = '-- '+e.text });