easyui日期选择控件：只显示年月

最新推荐文章于 2025-06-21 12:23:08 发布

原创最新推荐文章于 2025-06-21 12:23:08 发布 · 3.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#easyui 日期控件年月

jquery easyui 专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何使用EasyUI库中的日期选择器组件仅显示年份和月份，通过JavaScript代码实现控件的定制，包括事件监听、日期解析和格式化。

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

因为easyui自带的控件默认显示的是年月日，所以想要只要年和月，需要重新初始化。
效果：
在这里插入图片描述
html代码：

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
	<title>easyui年月选择控件</title>
	<meta name="decorator" content="default"/>
	
	**<!--需要引入的文件-->**
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    <script src="../../easyui-lang-zh_CN.js"></script>
	
	<script type="text/javascript">
	//js代码初始化
	 $(function() {      
	          $('#dateInfo').datebox({    
	                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 = /\d{4}/.exec(span.html())[0]// 得到年份    
	                                , month = parseInt($(this).attr('abbr'), 10) ; // 月份    
	                                $('#dateInfo').datebox('hidePanel')// 隐藏日期对象    
	                                .datebox('setValue', year + '-' + month); // 设置日期的值    
	                            });    
	                        }, 0);    
                },    
                parser : function(s) {// 配置parser，返回选择的日期    
                    if (!s)    
                        return new Date();    
                    var arr = s.split('-');    
                    return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, 1);    
                },    
                
                formatter: function (d) {
                    return d.getFullYear() + '-' + (d.getMonth() + 1);
                }
            });    
            var p = $('#dateInfo').datebox('panel'), // 日期选择对象    
            tds = false, // 日期选择对象中月份    
            span = p.find('span.calendar-text'); // 显示月份层的触发控件    
            
    });    
	</script>
</head>
<body class="">
	<!--日期选择框-->
	<input id="dateInfo"  editable="false"  />
</body>
</html>

需要引入的文件大家都可以去easyui的官网下载：
http://www.jeasyui.net/download/jquery.html
点击网址下拉：
在这里插入图片描述
下载完成后是一个压缩包，打开选择你需要的文件：
《1》jquery-easyui-1.7.0.zip\themes\default\images ：里面是需要用到的两个图片：
《2》jquery-easyui-1.7.0.zip\themes\default 文件路径easyui.css
《3》jquery-easyui-1.7.0.zip 文件路径：jquery.easyui.min.js
《4》jquery-easyui-1.7.0.zip 文件路径：locale easyui-lang-zh_CN.js