mui时间控件

时间控件的使用

1. 添加一个input标签，用来显示时间

   <input id='lostSeatch_date' type="button" name="color" class="sec_box" value="请选择搜索日期"/>
   <img src="img/[e-mail]" id="date_img" class="date_icon" />

2. 对其注册点击事件，选择时间

   <script type="text/javascript">
   (function($) {
   $.init();
   var mydate = $('#lostSeatch_date')[0];
   mydate.addEventListener("tap", function(ev) {
   lostfocus();
   var picker = new $.DtPicker({
   "type": "date",
   "beginYear": 2017,
   "endYear": 2027,
   });
   picker.show(function(rs) {
   mydate.value = rs.text;
   picker.dispose();
   isDisplay(mydate.value);
   });
   });
   
   

   $("#dateClear_img")[0].addEventListener("tap", function() {//清空时间
   mydate.value = "请选择搜索日期";
   isDisplay(mydate.value);
   });

   })(mui);//引用mui
   </script>

时间控件和input标签并存时，ios系统键盘和mui时间控件同时显示

1. 设置输入框的焦点消失，在点击选择时间时调用

   function lostfocus() {
   $("input").blur();
   }

取消时间按钮显示状态

1. 有时间时显示x，没选择时不显示

   function isDisplay(val){
   if(val=="请选择搜索日期" || val=="")
   {
   $("#dateClear_img").css("display","none");
   }else{
   $("#dateClear_img").css("display","inline");
   }
   }