如何利用mui實現底部選擇器（含日期選擇器）？

1.第一步：

項目中應該引入相應的css和js文件，相關文件可到mui官網查詢。

 <link rel="stylesheet" type="text/css" href="../base/css/mui.min.css" />
 <link rel="stylesheet" type="text/css" href="../base/css/mui.picker.min.css" />
 <link rel="stylesheet" type="text/css" href="../base/css/mui.dtpicker.css" />

<script type="text/javascript" src="../base/js/mui.min.js"></script>
<script type="text/javascript" src="../base/js/mui.picker.min.js"></script>
<script type="text/javascript" src="../base/js/mui.dtpicker.js"></script>

二、編寫普通選擇器的代碼

　　// 交友目的 
    $('.hobby_option').click(function () {
        var picker = new mui.PopPicker();
        picker.setData([{
            value: '1',
            text: '興趣交友'
        }, {
            value: '2',
            text: '談戀愛'
        }, {
            value: '3',
            text: '結婚對象'
        }, {
            value: '4',
            text: '其餘'
        }]);
　　　　　//這裏表明被選中的元素
        picker.show(function (selectItems) {
            $(".hobby_option").val(selectItems[0].text)
        })

    })

三、編寫日期選擇器的代碼

　　// 彈框選項4 生日
    $('.birth_option').click(function () {
        var dtpicker = new mui.DtPicker(
            {
                type: "date", //設置日曆初始視圖模式
                beginDate: new Date(1950, 04, 25), //設置開始日期
                endDate: new Date() //設置開始日期
            }
        );
        dtpicker.show(function (selectItems) {
            $(".birth_option").val(selectItems.text)
        })

    })

 

The end!