MUI学习笔记2

时间选择器

1.日期选择器
创建按钮，设计onclick（）事件间来打开日期选择控件。
具体代码如下：

<div class="mui-content">			
 <button type="button" class="mui-btn" onclick="getDate();">获取日期</button>				
			</div>

构造getDate（）方法实现日期选择
具体代码如下：

function getDate(){
			var dDate=new Date();
			dDate.setFullYear(2021,0,19);
			var minDate=new Date();
			minDate.setFullYear(2001,6,10);
			var maxDate=new Date();
			maxDate.setFullYear(2050,1,19);
			plus.nativeUI.pickDate(function(e){
				var d=e.data;
				mui.toast("您选择的日期是:"+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate());
			},function(e){
				mui.toast("您没有选择日期");
			},{
				title:'请选择日期',
				date:dDate,
				minDate:minDate,
				maxDate:maxDate
			});
		};

需设置默认日期，最大日期及最小日期，用户执行操作后弹出相关语句，需注意月份是从下标0开始的。
运行效果如下：

2.时间选择器
创建按钮，设计onclick（）事件间来打开日期选择控件。
具体代码如下：

<div class="mui-content">
				<button type="button" class="mui-btn" onclick="getTime();" >获取时间</button>				
			</div>

构造getTime（）方法实现日期选择
具体代码如下：

function getTime(){
			var dTime=new Date();
			dTime.setHours(6,0);
			plus.nativeUI.pickTime(function(e){
				var d=e.data;
				mui.toast("您选择的时间是:"+d.getHours()+":"+d.getMinutes());
				},function(e){
					mui.toast("您没有选择时间");
				},{
					title:"请选择时间",
					is24Hour:true,
					time:dTime
				});
		}

较之日期选择器比较简单，只需设置默认时间即可。
运行结果如下图：