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。
注:親測有效,希望可以幫助到你!