如何利用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>

2、编写普通选择器的代码

　　// 交友目的 
    $('.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)
        })

    })

3、编写日期选择器的代码

　　// 弹框选项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!