easyui 修改日期选择框只显示年月，

最新推荐文章于 2024-07-30 00:34:45 发布

原创最新推荐文章于 2024-07-30 00:34:45 发布 · 688 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在EasyUI中修改日期选择框，使其仅显示年月，通过设置特定属性实现。虽然允许用户输入会弹出到日选择，但所选值仍为正确月份。建议使用editable="false"禁用用户输入，直接展示选择框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

只显示年月的方法：此方法允许用户输入的话会弹出到日，但是选择的值还是正确的月份值，最好使用editable="false"属性将用户输入禁用直接弹出选择框

    $(function () { 
        $('#id').datebox({
            //显示日趋选择对象后再触发弹出月份层的事件，初始化时没有生成月份层
            onShowPanel: function () {
                //触发click事件弹出月份层
                span.trigger('click');
                if (!tds)
                //延时触发获取月份对象，因为上面的事件触发和对象生成有时间间隔
                    setTimeout(function () {
                        tds = p.find('div.calendar-menu-month-inner td');
                        tds.click(function (e) {
                            //禁止冒泡执行easyui给月份绑定的事件
                            e.stopPropagation();
                            //得到年份
                            var year = /\d{4}/.exec(span.html())[0],
                                //月份
                                //之前是这样的month = parseInt($(this).attr('abbr'), 10) + 1;
                                month = parseInt($(this).attr('abbr'), 10);

                            //隐藏日期对象
                            $('#require_date').datebox('hidePanel')
                            //设置日期的值
                                .datebox('setValue', year + '-' + month);
                        });
                    }, 0);
            },
            //配置parser，返回选择的日期
            parser: function (s) {
                if (!s) return new Date();
                var arr = s.split('-');
                return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, 1);
            },
            //配置formatter，只返回年月 之前是这样的d.getFullYear() + '-' +(d.getMonth());
            formatter: function (d) {
                var currentMonth = (d.getMonth() + 1);
                var currentMonthStr = currentMonth < 10 ? ('0' + currentMonth) : (currentMonth + '');
                return d.getFullYear() + '-' + currentMonthStr;
            }
        });

        //日期选择对象
        var p = $('#id').datebox('panel'),
            //日期选择对象中月份
            tds = false,
            //显示月份层的触发控件
            span = p.find('span.calendar-text');
        var curr_time = new Date();

        //设置前当月
        $("#id").datebox("setValue", myformatter(curr_time));
    });

    //格式化日期
    function myformatter(date) {
        //获取年份
        var y = date.getFullYear();
        //获取月份
        var m = date.getMonth() + 1;
        return y + '-' + m;
    }