EasyUI datebox控件默认只显示年月选择

最新推荐文章于 2025-10-17 12:42:18 发布

原创最新推荐文章于 2025-10-17 12:42:18 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #javascript #html

datebox 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何在EasyUI中使datebox控件默认只显示年月选择。通过下载EasyUI包，引入必要的js和css文件，然后在html元素中添加datebox，并通过js实现只显示年月的选择面板。最后展示了实现后的效果。

EasyUI datebox控件默认只显示年月选择

EasyUI 的时间控件datebox一般默认为显示日期选择，有的时候业务需求只显示年份与月份，原生的datebox控件js并没有提供这样的选项，这时候就需要写js去实现，废话不多说，上实例：

1.下载easyui包

首先需要下载easyui包，这个直接从官网上下载就行了：http://www.jeasyui.net/download/jquery.html

2.引入js及css文件

html或jsp页面引入

<link rel="stylesheet" type="text/css" href="/easyUI/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="/easyUI/themes/icon.css"/>
<script type="text/javascript" src="/easyUI/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="/easyUI/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/easyUI/locale/easyui-lang-zh_CN.js"></script>

3.添加html元素

<input name="date" id="date" class="easyui-datebox">

4.js控制只显示年份与月份选择面板

	var node =  $('input[name="date"]');
	var p = node.datebox('panel');// 日期选择对象
	var span = p.find('div.calendar-title span');// 显示月份层的触发控件
	var yuefen=p.find(".calendar-menu");//月份选择面板
	node.datebox({
		onShowPanel : function() {// 显示日期选择对象后再触发弹出月份层的事件，初始化时没有生成月份层
			span.trigger('click');// 触发click事件弹出月份层
			yuefen.show();//显示月份面板
			setTimeout(function() {// 延时触发获取月份对象，因为上面的事件触发和对象生成有时间间隔
				var tableTd = p.find('div.calendar-menu-month-inner td');
				tableTd.on("click",function (e) {
					e.stopPropagation();// 禁止冒泡执行easyui给月份绑定的事件
					var event = e.target,//当前被点击的月
							y=/\d{4}/.exec(span.html())[0],//年份
							m=parseInt($(event).attr("abbr"));//月份
					if(m<10)  m="0"+m;
					node.datebox('hidePanel');// 隐藏日期对象
					node.datebox('setValue', y + '-' + m);// 设置日期的值
				});
			}, 0);
		},
		formatter:function (date) {//格式化日期
			var y = date.getFullYear(),
					m = date.getMonth()+1;
			if(m<10) m = "0"+m;
			return y+"-"+m;
		},
		parser:function (s) {//解析一个日期字符串
			var t = Date.parse(s);
			return !isNaN(t) ? new Date(t) : new Date();
		}
	});