easyUI自帶的時間外掛日期選擇、月份選擇、時間選擇的使用
阿新 • • 發佈:2019-01-08
1.日期選擇
只要將class設定成easyui-datebox就可以了,當然前提是已經應用了easyui的js
<input type="text" class="easyui-datebox" id="datetime">
2.時間選擇
預設的時間選擇是精確到年月日時分秒的,只要把class設定成easyui-datetimebox就可以實現
<input type="text" id="datetime1" class="easyui-datetimebox">
</pre><p>當然他的效果圖是這樣的:</p><p> <img src="https://img-blog.csdn.net/20160328112415185?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></p><p>所以如果需要自定義他的顯示格式的話我們需要自己重寫他的format方法:(注意下面紅色部分需要加進去)</p><p><pre name="code" class="html"><input type="text" id="datetime" <span style="color:#ff0000;">data-options="<strong>formatter:ww3,parser:w3</strong>"</span> class="easyui-datetimebox">
上面程式碼是將顯示格式變成:yyyy-mm-dd HH.也可以根據自己的需要修改上面的程式碼,比如你要精確到分或者秒,都可以的。下面是效果圖:<script type="text/javascript"> function ww3(date){ var y = date.getFullYear(); var m = date.getMonth()+1; var d = date.getDate(); var h = date.getHours(); var str = y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d)+':'+(h<10?('0'+h):h); return str; } function w3(s){ if (!s) return new Date(); var y = s.substring(0,4); var m =s.substring(5,7); var d = s.substring(8,10); var h = s.substring(11,14); var min = s.substring(15,17); var sec = s.substring(18,20); if (!isNaN(y) && !isNaN(m) && !isNaN(d) && !isNaN(h) && !isNaN(min) && !isNaN(sec)){ return new Date(y,m-1,d,h,min,sec); } else { return new Date(); } } </script>
3.月份選擇
easyui自帶的是沒有月份選擇的panel的,所以我們需要修改一下原始碼:
<input type="text" id="datetime" >
然後在js中:
<script type="text/javascript"> $(function() { $('#datetime1').datebox({ onShowPanel : function() {// 顯示日趨選擇物件後再觸發彈出月份層的事件,初始化時沒有生成月份層 span.trigger('click'); // 觸發click事件彈出月份層 if (!tds) setTimeout(function() {// 延時觸發獲取月份物件,因為上面的事件觸發和物件生成有時間間隔 tds = p.find('div.calendar-menu-month-inner td'); tds.click(function(e) { e.stopPropagation(); // 禁止冒泡執行easyui給月份繫結的事件 var year = /\d{4}/.exec(span.html())[0]// 得到年份 , month = parseInt($(this).attr('abbr'), 10) + 1; // 月份 $('#datetime1').datebox('hidePanel')// 隱藏日期物件 .datebox('setValue', year + '-' + month); // 設定日期的值 }); }, 0); }, parser : function(s) {// 配置parser,返回選擇的日期 if (!s) return new Date(); var arr = s.split('-'); return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, 1); }, formatter : function(d) { var month = d.getMonth(); if(month<=10){ month = "0"+month; } if (d.getMonth() == 0) { return d.getFullYear()-1 + '-' + 12; } else { return d.getFullYear() + '-' + month; } }// 配置formatter,只返回年月 }); var p = $('#datetime1').datebox('panel'), // 日期選擇物件 tds = false, // 日期選擇物件中月份 span = p.find('span.calendar-text'); // 顯示月份層的觸發控制元件 }); </script>
最後的效果如下圖: