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'); //显示月份层的触发控件
发布了65 篇原创文章 · 获赞 34 · 访问量 6万+

猜你喜欢

转载自blog.csdn.net/My_ben/article/details/100738873