mui实现年月日级联，是借用里面的一个picker选择器的组件，所以在引入mui.min.css跟mui.min.js之后，要再次引入mui.picker.min.css和mui.picker.min.js，若是文件找不到，这有一个非常简洁的方法，用HBuilder创建一个WebApp，引用一个Hello mui的模板，到js、css文件夹里面找，复制到你的项目下即可。
废话不多说，直接上代码
code
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/mui.css"/>
<link rel="stylesheet" type="text/css" href="../css/mui.picker.css"/>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left">
<span style="color: #202020; font-size: 20px;">年月日级联</span>
</a>
</header>
<div class="mui-content">
<div id="showYMD"> 显示年月日</div>
</div>
<script src="./mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.plusReady(function(){
document.getElementById('showYMD').addEventListener('tap',function () {
var datePicker=new mui.DtPicker({
type:'date',//若只显示年月日，类型为date，
beginDate:new Date(1999,01,01),//开始时间，即所显示的时间里，最早的年份日期
endDate:new Date(),//不传参数，表示为当前时间
});
datePicker.show(function(selectItems){
//将选择的年月日显示到屏幕上
document.getElementById('showYMD').innerHTML=selectItems;
});
})
});
</script>
</body>
</html>
注：是我将DtPicker误写成Dtpicker了，所以一直报Dtpicker不是一个constructor的错误，在这里我想说明一下，要善于发现问题、解决问题，比如，上面代码中需要new一个datepicker的实例，但是一直报错“没有这个构造函数“的错，那么你就可以复制Dtpicker该构造函数名，然后在mui.picker.min.js中搜索，如果没有则说明写错了，那么就可以搜索picker关键字，肯定会找到正确的构造函数名称.
本文写于2017年4月，如果使用的是最新版本的mui代码，可能会出现不兼容的情况。
另外，所有引入的js文件在我的github均可以下载下来。
是不是非常简单。。。。
3221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
