EasyUI Datebox只顯示到年月不顯示日

在網上找了一些借鑑 改了一些代碼 效果如下:

兩邊的datebox都只顯示到年月 不顯示日
在這裏插入圖片描述
在這裏插入圖片描述
代碼如下:

//aspx代碼
<input id="txtStartTime" type="text" class="easyui-datebox" style="width: 150px;">
<input id="txtEndTime" type="text" class="easyui-datebox" style="width: 150px;">
//js代碼
//日期框設置
    $('#txtStartTime').datebox({
        width: "120px;",
        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 = $(".calendar-menu-year").val();
                    var month = parseInt($(this).attr('abbr'), 10);
                    $('#txtStartTime').datebox('hidePanel')//隱藏日期對象
                            .datebox('setValue', year + '-' + month); //設置日期的值
                });
            }, 0)
        },
        parser: function (s) {//配置parser,返回選擇的日期
            if (!s) return new Date();
            var ss = (s.split('-'));
            var y = parseInt(ss[0], 10);
            var m = parseInt(ss[1], 10);
            if (!isNaN(y) && !isNaN(m)) {
                return new Date(y, m - 1);
            } else {
                return new Date();
            }
        },
        formatter: function (d) {
            debugger;
            var y = d.getFullYear();
            var m = d.getMonth() + 1;
            var d = d.getDate();
            return y + '-' + (m < 10 ? ('0' + m) : m);
        }//配置formatter,只返回年月
    });
    var p = $('#txtStartTime').datebox('panel'), //日期選擇對象
            tds = false, //日期選擇對象中月份
            span = p.find('span.calendar-text'); //顯示月份層的觸發控件

    $('#txtEndTime').datebox({
        width: "120px;",
        onShowPanel: function () {//顯示日趨選擇對象後再觸發彈出月份層的事件,初始化時沒有生成月份層
            span1.trigger('click'); //觸發click事件彈出月份層
            if (!tds1) setTimeout(function () {//延時觸發獲取月份對象,因爲上面的事件觸發和對象生成有時間間隔
                tds1 = h.find('div.calendar-menu-month-inner td');
                tds1.click(function (e) {
                    e.stopPropagation(); //禁止冒泡執行easyui給月份綁定的事件
                    var year = $(".calendar-menu-year").val();
                    var month = parseInt($(this).attr('abbr'), 10);
                    $('#txtEndTime').datebox('hidePanel')//隱藏日期對象
                            .datebox('setValue', year + '-' + month); //設置日期的值
                });
            }, 0)
        },
        parser: function (s) {//配置parser,返回選擇的日期
            if (!s) return new Date();
            var ss = (s.split('-'));
            var y = parseInt(ss[0], 10);
            var m = parseInt(ss[1], 10);
            if (!isNaN(y) && !isNaN(m)) {
                return new Date(y, m - 1);
            } else {
                return new Date();
            }
        },
        formatter: function (d) {
            debugger;
            var y = d.getFullYear();
            var m = d.getMonth() + 1;
            var d = d.getDate();
            return y + '-' + (m < 10 ? ('0' + m) : m);
        }//配置formatter,只返回年月
    });
    var h = $('#txtEndTime').datebox('panel'), //日期選擇對象
    tds1 = false, //日期選擇對象中月份
    span1 = h.find('span.calendar-text'); //顯示月份層的觸發控件
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章