MUI-时间提示框，日期和时间提示设置

最新推荐文章于 2022-10-20 15:45:08 发布

佛佛ง

最新推荐文章于 2022-10-20 15:45:08 发布

阅读量1.9k

点赞数

分类专栏： MUI

本文链接：https://blog.csdn.net/LzzMandy/article/details/85318083

版权

MUI 专栏收录该内容

36 篇文章 7 订阅

订阅专栏

1、下图为日期选择

2、下图为时间

3、源码

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
	</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 mui-text-center mui-content-padded">
			<button type="button" class="mui-btn-block mui-btn-blue mui-btn-outlined">日期提示框</button>
			<button type="button" class="mui-btn-block mui-btn-blue mui-btn-outlined">时间</button>
		</div>

		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init();
			var btns = document.getElementsByClassName("mui-btn-block");
			btns['0'].onclick = function() {
				//js里的月份是从0月开始的，也就是说，js中的0月是我们1月
				var dDate = new Date(); //默认显示的时间
				dDate.setFullYear(2018, 11, 28);//默认显示2018.12.28
				var minDate = new Date(); //可选择的最小时间
				minDate.setFullYear(2010, 0, 1);//最小时间2010.1.1
				var maxDate = new Date(); //选择的最大的时间
				maxDate.setFullYear(2020, 11, 31);//最大时间2020.12.31
				// pickData(成功,失败,时间提示框信息)
				plus.nativeUI.pickDate(function(e) {
					var d = e.date;//当前选择的时间
					alert('您选择的日期是:' + d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate());

				}, function(e) {
					alert('您没有选择日期');
				}, {
					title: "请选择日期",
					date: dDate,
					minDate: minDate,
					maxDate: maxDate
				});
			};
			btns['1'].onclick = function() {
				var dTime = new Date();
				dTime.setHours(20, 0); //设置默认时间
				plus.nativeUI.pickTime(function(e) {
					var d = e.date;
					alert("您选择的时间是：" + d.getHours() + ":" + d.getMinutes());
				}, function(e) {
					alert('您没有选择时间');
				}, {
					title: "请选择时间",
					is24Hour: true,
					// is24Hour: false,//显示上下午
					time: dTime
				});
			};
		</script>
	</body>

</html>