easyui-datebox 只显示月份选择，默认开启月份，隐藏日期选择框

水上冰石

已于 2024-07-31 16:59:58 修改

阅读量1.1k

点赞数 41

文章标签： easyui 前端月份选择框

于 2024-07-30 00:34:45 首次发布

本文链接：https://blog.csdn.net/jiao_zg/article/details/140784360

版权

前端 javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

如果你使用 easyui-datebox 并希望隐藏日期选择框，只显示月份选择，可以通过一些自定义代码来实现。虽然 EasyUI 没有直接提供这种功能，但可以通过自定义 formatter 和 parser 方法，以及修改 onShowPanel 事件来实现这个功能。

以下是一个详细的示例：

HTML 部分：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>EasyUI Datebox - Month Only</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/easyui@1.9.13/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/easyui@1.9.13/themes/icon.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/easyui@1.9.13/jquery.easyui.min.js"></script>
</head>
<body>
    <input id="monthOnlyDatebox" style="width:150px">
    
    <script type="text/javascript">
        $(function(){
            $('#monthOnlyDatebox').datebox({
                formatter: function(date){
                    var y = date.getFullYear();
                    var m = date.getMonth() + 1;
                    return y + '-' + (m < 10 ? '0' + m : m);
                },
                parser: function(s){
                    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, 1);
                    } else {
                        return new Date();
                    }
                },
                onShowPanel: function(){
                    // 展示日期选择面板时自动点击月份选择
                    var panel = $(this).datebox('panel');
                    var span = panel.find('span.calendar-text');
                    span.trigger('click');

                    // 等待面板完全展开后绑定月份的点击事件
                    setTimeout(function(){
                        var tds = panel.find('div.calendar-menu-month-inner td');
                        tds.unbind('click').bind('click', function(e){
                            e.stopPropagation();
                            var year = /\d{4}/.exec(panel.find('span.calendar-text').html())[0];
                            var month = parseInt($(this).attr('abbr'), 10);
                            $('#monthOnlyDatebox').datebox('hidePanel')
                                .datebox('setValue', year + '-' + (month < 10 ? '0' + month : month));
                        });
                    }, 0);
                }
            });
        });
    </script>
</body>
</html>

关键点解释：

formatter 方法：将日期对象格式化为字符串，格式为 YYYY-MM。
parser 方法：将 YYYY-MM 格式的字符串解析为日期对象。
onShowPanel 事件：在日期选择面板显示时触发。通过 span.trigger('click') 模拟点击年份选择，使得月份选择面板显示出来。
自定义点击事件：在面板完全显示后，通过 setTimeout 方法绑定月份的点击事件。当用户点击某个月份时，获取年份和月份，并设置 datebox 的值，同时隐藏面板。

通过这种方法，用户只会看到月份的选择面板，而不会看到具体的日期选择。这种方式虽然需要一些自定义代码，但可以很好地实现你想要的功能。

本文由AIGC生成，具体地址：https://ai.ashuiai.com/auth/register?inviteCode=CAXCMMFZGT

水上冰石

关注

41
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
easyui-datebox 只显示月份选择，默认开启月份，隐藏日期选择框

如果你使用并希望隐藏日期选择框，只显示月份选择，可以通过一些自定义代码来实现。虽然 EasyUI 没有直接提供这种功能，但可以通过自定义和 parser 方法，以及修改事件来实现这个功能。
复制链接

扫一扫