zoukankan      html  css  js  c++  java
  • 如何利用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!

  • 相关阅读:
    一个重构眼中的“项目管理”
    vim显示行号、语法高亮、自动缩进的设置
    python中的try/except/else/finally语句--自我小结
    python 列表函数
    python异常处理
    gerrit使用总结
    数据访问对象模式
    组合实体模式
    业务代表模式
    MVC模式
  • 原文地址:https://www.cnblogs.com/teamemory/p/8534435.html
Copyright © 2011-2022 走看看