> > 5mui datepicker（时间选择器）
gebilaowang

5mui datepicker（时间选择器）

5mui datepicker（时间选择器）

律霓青先藕廷芬灯吭煌乏聪港

参考文档

5mui datepicker（时间选择器）第1张

完整代码： 

<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">hello</h1>
</header>
<div class="mui-content">
    <div style="padding:15px;">
        <button id='pickDateBtn' type="button" class="mui-btn">选择日期</button>
    </div>
    <div style="padding:15px;">
        <button id='pickTimeBtn' type="button" class="mui-btn">选择时间</button>
    </div>
</div>
<script type="text/javascript">
document.getElementById("pickDateBtn").addEventListener('tap', function() {
    var dDate = new Date();
    //设置当前日期（不设置默认当前日期）
    dDate.setFullYear(2016, 7, 16);
    var minDate = new Date();
    //最小时间
    minDate.setFullYear(2010, 0, 1);
    var maxDate = new Date();
    //最大时间
    maxDate.setFullYear(2016, 11, 31);
    plus.nativeUI.pickDate(function(e) {
        var d = e.date;
        mui.toast('您选择的日期是:' + d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate());
    }, function(e) {
        mui.toast("您没有选择日期");
    }, {
        title: '请选择日期',
        date: dDate,
        minDate: minDate,
        maxDate: maxDate
    });
});
document.getElementById("pickTimeBtn").addEventListener('tap', function() {
    var dTime = new Date();
    //设置默认时间
    dTime.setHours(6, 0);
    plus.nativeUI.pickTime(function(e) {
        var d = e.date;
        mui.toast("您选择的时间是：" + d.getHours() + ":" + d.getMinutes());
    }, function(e) {
        mui.toast("您没有选择时间");
    }, {
        title: "请选择时间",
        is24Hour: true,
        time: dTime
    });
});

js获取当前时间 

var myDate = new Date();
myDate.getYear();        //获取当前年份(2位)
myDate.getFullYear();    //获取完整的年份(4位,1970-????)
myDate.getMonth();       //获取当前月份(0-11,0代表1月)
myDate.getDate();        //获取当前日(1-31)
myDate.getDay();         //获取当前星期X(0-6,0代表星期天)
myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours();       //获取当前小时数(0-23)
myDate.getMinutes();     //获取当前分钟数(0-59)
myDate.getSeconds();     //获取当前秒数(0-59)
myDate.getMilliseconds();    //获取当前毫秒数(0-999)
myDate.toLocaleDateString();     //获取当前日期
var mytime=myDate.toLocaleTimeString();     //获取当前时间
myDate.toLocaleString( );        //获取日期与时间
实际操作：

选择日期功能使用hbuileder的边看边改功能是看不见效果的，因为需要调用手机的系统时间

可以使用真机运行，我这里使用夜神安卓模拟器

夜神模拟器下载地址

安卓好模拟器后需要在hbuilder下进行如下设置

夜神安卓模拟器(夜神模拟器)安装好后需要在hbuilder中设置端口号 
在没有设置端口号之前： 

5mui datepicker（时间选择器）第2张

设置端口号

  1. 选择（运行–》浏览器运行–》设置web服务器） 

5mui datepicker（时间选择器）第3张

2.点击HBuilder，将第三方Android模拟器端口设置为：62001

5mui datepicker（时间选择器）第4张

5mui datepicker（时间选择器）第5张

3.设置完后，（运行–》真机运行）；如果没有检测到设备，重启hbuilder 

5mui datepicker（时间选择器）第6张

1.获取时间

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<!--头部-->
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">选择日期</h1>
	</header>
	<!--头部结束-->
	<!--主体-->
	<div class="mui-content">
		<div style="padding: 20px;">
			<button type="button" onclick="showDate()">获取日期</button>
		</div>
	</div>
	<script type="text/javascript">
		function showDate()
		{
			//获取时间对象
			var dDate = new Date();
		    //设置当前日期（不设置默认当前日期）
		    dDate.setFullYear(2016, 7, 16);//界面显示的默认时间是2016-8-16，因为js下标从0开始
		    var minDate = new Date();
		    //最小时间
		    minDate.setFullYear(2010, 0, 1);
		    var maxDate = new Date();
		    //最大时间
		    maxDate.setFullYear(2020, 12, 31);
		    //下面的函数是h5+的函数  作用是呼出时间
		    plus.nativeUI.pickDate(function(e) //用户选择时间后做的操作
		    {
		        var d = e.date;
		        mui.toast('您选择的日期是:' + d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate());
		    }, 
		    function(e)//用户没有选择时间做的操作
		    {
		        mui.toast("您没有选择日期");
		    }, 
		    {
		        title: '请选择日期',
		        date: dDate,
		        minDate: minDate,
		        maxDate: maxDate
		    });
		}
	</script>
</body>
</html>

执行，在安卓模拟器查看

5mui datepicker（时间选择器）第7张

5mui datepicker（时间选择器）第8张

2.选择时间 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<!--头部-->
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">选择日期</h1>
	</header>
	<!--头部结束-->
	<!--主体-->
	<div class="mui-content">
		<div style="padding: 20px;">
			<button type="button" onclick="showDate()">获取日期</button>
		</div>
		<div style="padding: 20px;">
			<button type="button" onclick="showTime()">获取时间</button>
		</div>
	</div>
	<script type="text/javascript">
		//获取日期
		function showDate()
		{
			//获取时间对象
			var dDate = new Date();
		    //设置当前日期（不设置默认当前日期）
		    dDate.setFullYear(2016, 7, 16);//界面显示的默认时间是2016-8-16，因为js下标从0开始
		    var minDate = new Date();
		    //最小时间
		    minDate.setFullYear(2010, 0, 1);
		    var maxDate = new Date();
		    //最大时间
		    maxDate.setFullYear(2020, 12, 31);
		    //下面的函数是h5+的函数  作用是呼出时间
		    plus.nativeUI.pickDate(function(e) //用户选择时间后做的操作
		    {
		        var d = e.date;
		        mui.toast('您选择的日期是:' + d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate());
		    }, 
		    function(e)//用户没有选择时间做的操作
		    {
		        mui.toast("您没有选择日期");
		    }, 
		    {
		        title: '请选择日期',
		        date: dDate,
		        minDate: minDate,
		        maxDate: maxDate
		    });
		}
		
		//获取时间
		function showTime()
		{
			var dTime = new Date();
		    //设置默认时间
		    dTime.setHours(6, 0);
		    plus.nativeUI.pickTime(function(e) //用户选择了时间
		    {
		        var d = e.date;
		        mui.toast("您选择的时间是：" + d.getHours() + ":" + d.getMinutes());
		    }, 
		    function(e) //用户没有选择时间
		    {
		        mui.toast("您没有选择时间");
		    }, 
		    {
		        title: "请选择时间",
		        is24Hour: true,
		        time: dTime
		    });
		}
	</script>
</body>
</html>

执行

5mui datepicker（时间选择器）第9张

5mui datepicker（时间选择器）第10张

获取当前的默认时间（即默认显示的是手机的时间） 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<!--头部-->
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">选择日期</h1>
	</header>
	<!--头部结束-->
	<!--主体-->
	<div class="mui-content">
		<div style="padding: 20px;">
			<button type="button" onclick="showDate()">获取日期</button>
		</div>
		<div style="padding: 20px;">
			<button type="button" onclick="showTime()">获取时间</button>
		</div>
	</div>
	<script type="text/javascript">
		//获取日期
		function showDate()
		{
			//获取时间对象
			var dDate = new Date();
		    //设置当前日期（不设置默认当前日期）
		    dDate.setFullYear(2016, 7, 16);//界面显示的默认时间是2016-8-16，因为js下标从0开始
		    var minDate = new Date();
		    //最小时间
		    minDate.setFullYear(2010, 0, 1);
		    var maxDate = new Date();
		    //最大时间
		    maxDate.setFullYear(2020, 12, 31);
		    //下面的函数是h5+的函数  作用是呼出时间
		    plus.nativeUI.pickDate(function(e) //用户选择时间后做的操作
		    {
		        var d = e.date;
		        mui.toast('您选择的日期是:' + d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate());
		    }, 
		    function(e)//用户没有选择时间做的操作
		    {
		        mui.toast("您没有选择日期");
		    }, 
		    {
		        title: '请选择日期',
		        date: dDate,
		        minDate: minDate,
		        maxDate: maxDate
		    });
		}
		
		//获取时间
		function showTime()
		{
			var myDate = new Date();
			var h=myDate.getHours(); 
			var min=myDate.getMinutes();
		    //设置默认时间
		    var dTime=new Date();
		    dTime.setHours(h, min);
		    plus.nativeUI.pickTime(function(e) //用户选择了时间
		    {
		        var d = e.date;
		        mui.toast("您选择的时间是：" + d.getHours() + ":" + d.getMinutes());
		    }, 
		    function(e) //用户没有选择时间
		    {
		        mui.toast("您没有选择时间");
		    }, 
		    {
		        title: "请选择时间",
		        is24Hour: true,
		        time: dTime
		    });
		}
	</script>
</body>
</html>

执行，此时显示的默认时间就是手机的时间

5mui datepicker（时间选择器）第11张

5mui datepicker（时间选择器）第12张

揭描砂邻私挺匙揽鲤问草玫类