先看效果圖

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">

自定義組件樣式，可根據(jù)自己需要自行改變

<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">請(qǐng)選擇日期...</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'>請(qǐng)選擇地址</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>

接下來(lái)實(shí)例化組件

<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", //設(shè)置日歷初始化
                beginYear: 1898, //設(shè)置開(kāi)始日期
                endDate: new Date //設(shè)置結(jié)束日期
            });
            picker.show(function(rs) {
                /*
                 * rs.value 拼合后的 value
                 * rs.text 拼合后的 text
                 * rs.y 年，可以通過(guò) rs.y.vaue 和 rs.y.text 獲取值和文本
                 * rs.m 月，用法同年
                 * rs.d 日，用法同年
                 * rs.h 時(shí)，用法同年
                 * rs.i 分（minutes 的第二個(gè)字母），用法同年
                 */
                birthdayBtn.innerText = rs.text;
                birthday = rs.text;
                console.log(birthday);
                /*
                 * 返回 false 可以阻止選擇框的關(guān)閉
                 * return false;
                 */
                /*
                 * 釋放組件資源，釋放后將將不能再操作組件
                 * 通常情況下，不需要示放組件，new DtPicker(options) 后，可以一直使用。
                 * 當(dāng)前示例，因?yàn)閮?nèi)容較多，如不進(jìn)行資原釋放，在某些設(shè)備上會(huì)較慢。
                 * 所以每次用完便立即調(diào)用 dispose 進(jìn)行釋放，下次用時(shí)再創(chuàng)建新實(shí)例。
                 */
                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 可以阻止選擇框的關(guān)閉
                //return false;
            });
        }, false);
    })(mui, document);
</script>

源碼下載

加我微信公眾號(hào)【皮蛋餡兒】，一起學(xué)習(xí)哦~