MUI 之 日期選擇器 簡單易懂

HTML

<button type="button" class="starttime" id="starttime">開始日期</button><span>-</span>
<button type="button" class="endtime" id="endtime">結束日期</button>

 

記得引入 picker.css  和 picker.js      picker.js 要放到mui.js 的后面

JS

//開始時間
document.getElementById('starttime').addEventListener('tap', function(){
	option={"type":"date","beginYear":"1980","endYear":"2030"};
	 var picker = new mui.DtPicker(option); 
	 picker.show(function(rs) {
		console.log(rs.text)
                     document.getElementById('starttime').innerHTML = rs.text;
	 });  
},false);
//結束時間
document.getElementById('endtime').addEventListener('tap', function(){
	option={"type":"date","beginYear":"1980","endYear":"2030"};
	var picker = new mui.DtPicker(option); 
	picker.show(function(rs) {
		console.log(rs.text)
		document.getElementById('endtime').innerHTML = rs.text;
	});  
},false);