mui日期控件的使用

 【1、 HTML 】

      

<input type="text" readonly="readonly" onmousedown="return false"; id="start" data-dateType="date">
        readonly = "readonly": 苹果系统使用此日期控件时会出现软键盘,添加此代码,不弹出软键盘


    
  【2、引入JS/CSS 】

  CSS:mui.picker.css/mui.poppicker.css/mui.dtpicker.css
  JS :mui.picker.min.js

  【3、 JS 】
     

 方法一(设置默认时间):
         //获得系统当前时间
         function CurentTime() {
                var now = new Date();
                var year = now.getFullYear(); //年
                var month = now.getMonth() + 1; //月
                var day = now.getDate(); //日   

                var clock = year + "-";
                if(month < 10)
                    clock += "0";
                clock += month + "-";
                if(day < 10)
                    clock += "0";
                clock += day;
                return clock;
           }
           //通过id给日期控件赋初始值
           $("#start").val(CurentTime());

方法二(编写日期的点击事件):
           // 开始时间 点击事件
           function start() {
                var options = {
                    type: "date",
                    beginYear: 2015  //日期的最大选择年份
                };
                var dtPicker = new mui.DtPicker(options);
                dtPicker.show(function(selectItems) {
                    if(selectItems.value > CurentTime()) {
                        mui.alert('不能大于当前时间');
                    } else {
                        $("#start").val(selectItems.value);
                    }
                })
            }


 

猜你喜欢

转载自blog.csdn.net/weixin_41583535/article/details/81132644