天天看點

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

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就是最初的日期選擇框

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

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。

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