Mui picker（选择器）日期、地址组件的使用

先看效果图

Paste_Image.png NOO1I2_}_7(94065DBORY7B.png

引入css

<link href="css/mui.min.css" rel="stylesheet">
<link href="css/mui.picker.min.css" rel="stylesheet">
<link href="css/mui.poppicker.css" rel="stylesheet">

自定义组件样式，可根据自己需要自行改变

<style>
    p {
        color: #333;
        margin-bottom: 5px;
    }

    .time, .place {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        margin-bottom: 10px;
    }

    .time .mui-btn-block, .place .mui-btn-block {
        padding: 8px 10px;
        margin-bottom: 0;
        font-size: 12px;
        border: none;
        border-radius: 5px;
        color: #272727;
    }
</style>

<p>日期</p>
<div class="time">
    <input name="birthday" type="hidden" id="birthday" value="">
    <button id="birthdayBtn" class="btn mui-btn mui-btn-block">请选择日期...</button>
</div>

<p>地址</p>
<div class="place">
    <input name="address" type="hidden" id="address" value="">
    <button id='addressBtn' class="mui-btn mui-btn-block" type='button'>请选择地址</button>
</div>

引入js

<script src="js/mui.min.js"></script>
<script src="js/mui.picker.min.js"></script>
<script src="js/mui.poppicker.js"></script>
<script src="js/city.data.js"></script>
<script src="js/city.data-3.js"></script>

接下来实例化组件

<script>
    (function($, doc) {
        var _getParam = function(obj, param) {
            return obj[param] || '';
        };
        var cityPicker3 = new $.PopPicker({
            layer: 3
        });

        // 出生年月
        var birthday = doc.getElementById('birthday').value;
        var birthdayBtn = doc.getElementById('birthdayBtn');
        birthdayBtn.addEventListener('tap', function() {
            var optionsJson = this.getAttribute('data-options') || '{}';
            var options = JSON.parse(optionsJson);
            var id = this.getAttribute('id');
            var picker = new $.DtPicker({
                type: "date", //设置日历初始化
                beginYear: 1898, //设置开始日期
                endDate: new Date //设置结束日期
            });
            picker.show(function(rs) {
                /*
                 * rs.value 拼合后的 value
                 * rs.text 拼合后的 text
                 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
                 * rs.m 月，用法同年
                 * rs.d 日，用法同年
                 * rs.h 时，用法同年
                 * rs.i 分（minutes 的第二个字母），用法同年
                 */
                birthdayBtn.innerText = rs.text;
                birthday = rs.text;
                console.log(birthday);
                /*
                 * 返回 false 可以阻止选择框的关闭
                 * return false;
                 */
                /*
                 * 释放组件资源，释放后将将不能再操作组件
                 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
                 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
                 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
                 */
                picker.dispose();
            });
        }, false);

        // 地址
        cityPicker3.setData(cityData3);
        var addressBtn = doc.getElementById('addressBtn');
        addressBtn.addEventListener('tap', function(event) {
            cityPicker3.show(function(items) {
                var address = _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');
                addressBtn.innerText = address;
                console.log(address)
                // 返回 false 可以阻止选择框的关闭
                //return false;
            });
        }, false);
    })(mui, document);
</script>

源码下载

加我微信公众号【皮蛋馅儿】，一起学习哦~