mui中dtpicker组件--弹出日期选择器(移动端滑动日历)

责编:menVScode 2018-03-16 14:31 阅读(2796)

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'年视图(年月日)
'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); 
	})
}

效果图

QQ截图20180316151412

(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月。

实例

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); 
	})
}

效果图

QQ截图20180316152945


getSelectedItems()

返回值Date,类型: 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],类型: 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() 进行释放,下次用时再创建新实例。


实例

【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
    });
};

QQ截图20180316160758

打印 selectItems 的结果

QQ截图20180316160824

【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 }); };

22222

【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
	});
};

333333

【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
	});
};

相关文件下载链接:https://pan.baidu.com/s/1xIghOFPlREwOSYCAXvU0Bg 密码:kf6t

标签: 日期 dtpicker mui
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码