mui开发APP教程之年月日级联

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均可以下载下来。

是不是非常简单。。。。

mui开发APP教程之年月日级联

猜你喜欢