移動端時間控件 HTML5+ 的 pickDate 和 MUI 的 dtpicker 的使用與對比

本文將介紹兩種移動端的時間控件 HTML5+ 的 pickDate 和 MUI 的 dtpicker，API中的內容此文不再贅述，僅從實際應用過程中的遇到的問題進行分析對比與使用方法總結。

對比分析：

1、HTML5+ 的 pickDate http://www.dcloud.io/docs/api/zh_cn/nativeui.html#plus.nativeUI.pickDate

優點：文檔容易看，參數清晰，感覺上性能比mui的dtpicker要好一些
缺點：年月日的選擇 pickDate 和時分秒的選擇 pickTime 是分開的，需要選擇兩次

2、MUI 的 dtpicker http://dev.dcloud.net.cn/mui/ui/#dtpicker

優點：可以一次性選擇年月日和時分秒，控件內容更豐富一點
缺點：

• 文檔稍有不清晰，比如說設置初始值部分（默認是獲取當前時間）。設置value值即可。

var dtpicker = new mui.DtPicker({
    "type": "date",
    "value":"1950-03-03 09:12"
});

• 數據加載不是很流暢
• 這種mui控件，需要單獨引用js和css文件，不包含在mui.js和mui.css范圍內。關於引用文件的下載地址，可以通過hbuilder新建一個以hello mui為基礎的移動端項目，里面就有案例和需要引用的文件。

使用總結：

1、HTML5+ 的 pickDate
本例中 $this.val() = '2018-6-27 13:35' 是這種格式的，主要是幾個參數的設置，文檔很清晰，其他根據要求來決定，以下實現的是點擊顯示時間控件，默認顯示的時間是傳進來的數值

<input type="text" onfocus="$(this).blur()" onclick="pickDate($(this))">

//位數不夠前補零
function preZero(num, n) {
    return (Array(n).join(0) + num).slice(-n);
}
//選擇日期
function pickDate($this){
	var curD = new Date();
    var minD = new Date();
    var maxD = new Date();
    minD.setFullYear(1980, 0, 1);
    maxD.setFullYear(2036, 11, 31);

	var curDateArr = $this.val().split(' ')[0].split('-');
	var curTimeArr = $this.val().split(' ')[1].split(':');
	if(curDateArr) {
    	curD.setFullYear(curDateArr[0],curDateArr[1]-1,curDateArr[2]);
    }
	plus.nativeUI.pickDate( function(e){
		var d=e.date;
		
		$this.val(d.getFullYear()+"-"+preZero((d.getMonth()+1),2)+"-"+preZero(d.getDate(),2));
		pickTime($this,curTimeArr);
	},function(e){
		console.log( "未選擇日期："+e.message );
	},{
		date: curD,
		maxDate: maxD,
		minDate: minD,
		title: '請選擇日期',
		popover: {top:100,left:20,width:200,height:200,}
	});
}
//選擇時間
function pickTime($this,curTimeArr){
	var t = new Date();
	t.setHours(curTimeArr[0],curTimeArr[1]);
	plus.nativeUI.pickTime( function(e){
		var d=e.date;
		$this.val($this.val()+' '+preZero(d.getHours(),2)+":"+preZero(d.getMinutes(),2));
	},function(e){
		console.log( "未選擇時間："+e.message );
	},{
		time: t,
		is24Hour:true,
		title: '請選擇時間',
		popover: {top:100,left:20,width:200,height:200,}
	});
}

2、MUI 的 dtpicker

function pickerDate($this) {
    var minD = new Date();
    var maxD = new Date();
    minD.setFullYear(1980, 0, 1);
    maxD.setFullYear(2036, 11, 31);
	var dtPicker = new mui.DtPicker({
		type: 'datetime',
		beginDate: minD,
		endDate: maxD,
		value: $this.val()
	});
    dtPicker.show(function (selectItems) {
        $this.val(selectItems.y.value + "-" + selectItems.m.value + "-" + selectItems.d.value + " " + selectItems.h.value + ":" + selectItems.m.value);
    });
}