EasyUi日期控件datebox,只顯示年月,也只能選擇年月(親測有效,無效視頻剁吊)


var node =  $('input[name="createTime"]');
node.datebox({
onShowPanel : function() {// 顯示日期選擇對象后再觸發彈出月份層的事件,初始化時沒有生成月份層
span.trigger('click');// 觸發click事件彈出月份層
setTimeout(function() {// 延時觸發獲取月份對象,因為上面的事件觸發和對象生成有時間間隔
var tableTd = p.find('div.calendar-menu-month-inner td');
tableTd.on("click",function (e) {
e.stopPropagation();// 禁止冒泡執行easyui給月份綁定的事件
var event = e.target,//當前被點擊的月
y=/\d{4}/.exec(span.html())[0],//年份
m=parseInt($(event).attr("abbr"));//月份
if(m<10) m="0"+m;
node.datebox('hidePanel');// 隱藏日期對象
node.datebox('setValue', y + '-' + m);// 設置日期的值
});
}, 0);
},
formatter:function (date) {//格式化日期
var y = date.getFullYear(),
m = date.getMonth()+1;
if(m<10) m = "0"+m;
return y+"-"+m;
},
parser:function (s) {//解析一個日期字符串
var t = Date.parse(s);
return !isNaN(t) ? new Date(t) : new Date();
}
});
var p = node.datebox('panel');// 日期選擇對象
var span = p.find('div.calendar-title span');// 顯示月份層的觸發控件

1.基本的套路是,彈出日期窗口之后觸發點擊窗口標題的月份欄,彈出的就是月份窗口。
EasyUI默認的月份窗口選擇月份后回返回該月的日期窗口,把這個操作取消掉,然后把月份顯示在輸入框,就完成了。
2,變量p就是最初的日期選擇框

3,變量span是日期選擇框最上面顯示年月的部分,網上的代碼就是把這個元素取錯了,網上往往寫的是

 
        

4,觸發點擊年月的操作后,月份彈窗的html代碼是臨時生成的,所以需要setTimeout來延時獲取后面的內容。

 
        

5,變量tds是點擊年月之后彈出的月份選擇框中的月份按鈕,實際上div.calendar-menu-month-inner包含了一個table,而那些月份按鈕就是這個table中的td單元格。

6,e.stopPropagation()的作用是防止點擊月份之后時間傳給上級DOM,但是沒有看出來有什么必要。

7,td有abbr屬性,里面記錄的是月份按鈕的實際月份數,從1到12,不會默認補0,代碼里面我自己補了0。

 
注:親測有效,希望可以幫助到你!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM