Easyui easyui-datebox日期控制元件格式設定
阿新 • • 發佈：2019-02-18
easyui-datebox預設格式為 10/12/2018
1、設定格式化月份，
將easyui-datebox日期控制元件格式設定為自定義形式，如：2018-09，只顯示年月，如下：
html如下：
<input id="st_mouth" editable="false" class="easyui-datebox" name="name" data-options="label:'月份：'" />JS設定:
$(document).ready(function(){ $('#st_mouth').datebox({ //顯示日趨選擇物件後再觸發彈出月份層的事件，初始化時沒有生成月份層 onShowPanel: function () { //觸發click事件彈出月份層 span.trigger('click'); if (!tds) //延時觸發獲取月份物件，因為上面的事件觸發和物件生成有時間間隔 setTimeout(function() { tds = p.find('div.calendar-menu-month-inner td'); tds.click(function(e) { //禁止冒泡執行easyui給月份繫結的事件 e.stopPropagation(); //得到年份 var year = /\d{4}/.exec(span.html())[0] , //月份 //之前是這樣的month = parseInt($(this).attr('abbr'), 10) + 1; month = parseInt($(this).attr('abbr'), 10); //隱藏日期物件 $('#st_mouth').datebox('hidePanel') //設定日期的值 .datebox('setValue', year + '-' + month); }); }, 0); }, //配置parser，返回選擇的日期 parser: function (s) { if (!s) return new Date(); var arr = s.split('-'); return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, 1); }, //配置formatter，只返回年月 之前是這樣的d.getFullYear() + '-' +(d.getMonth()); formatter: function (d) { var currentMonth = (d.getMonth()+1); var currentMonthStr = currentMonth < 10 ? ('0' + currentMonth) : (currentMonth + ''); return d.getFullYear() + '-' + currentMonthStr; } }); //日期選擇物件 var p = $('#st_mouth').datebox('panel'), //日期選擇物件中月份 tds = false, //顯示月份層的觸發控制元件 span = p.find('span.calendar-text'); var curr_time = new Date(); //設定預設值為當前月 $("#st_mouth").datebox("setValue", formatter(curr_time)); });
完成！
2、設定格式化年-月-日
參考官網例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Date Format - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> </head> <body> <h2>Date Format</h2> <p>Different date formats are applied to different DateBox components.</p> <div style="margin:20px 0;"></div> <input class="easyui-datebox"></input> <input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser"></input> <script type="text/javascript"> function myformatter(date){ var y = date.getFullYear(); var m = date.getMonth()+1; var d = date.getDate(); return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d); } function myparser(s){ if (!s) return new Date(); var ss = (s.split('-')); var y = parseInt(ss[0],10); var m = parseInt(ss[1],10); var d = parseInt(ss[2],10); if (!isNaN(y) && !isNaN(m) && !isNaN(d)){ return new Date(y,m-1,d); } else { return new Date(); } } </script> </body> </html>
完成！