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");
   }
   }