EasyUI 自定义实现年月控件--只选择年月，也只能看到年月

       最近遇到按月统计系统KPI的需求，用的easyui框架，由于easyui默认不带年月功能，于是打算通过改写easyui的datebox实现年月功能，经过摸索完美实现easyui年月功能，简要记录如下：

先上最终结果图：

补上核心代码和注释：

引入依赖的样式

<link rel="stylesheet" type="text/css" href="res/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="res/themes/icon.css">

引入依赖的js

<script type="text/javascript" src="res/js/jquery.min.js"></script>
<script type="text/javascript" src="res/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="res/js/easyui-ext.js"></script>
<script type="text/javascript" src="res/js/easyui-validate.js"></script>
<script type="text/javascript" src="res/js/easyui-lang-zh_CN.js"></script>

页面布局：

	<form id="form_system_kpi_statics" method="post"
		class="pageForm required-validate">
		<div class="pageFormContent">
			<table style="border: solid #000 1px; width: 100%" class="datalist">
				<tr id="yearMonth">
					<td class="t1">时间范围</td>
					<td><input class="easyui-datebox" id="updttimeS"
						name="updttimeS" 
						style="width: 120px; height: 25px" type="text" 
						data-options="required:true, editable:true" />  --  
              			<input class="easyui-datebox" id="updttimeE"
						name="updttimeE" value="" 
						style="width: 120px; height: 25px" type="text" 
						data-options="required:true, editable:true" />
					</td>
				</tr>
			</table>
		</div>
		<div class="formBar" id='bb' style="text-align: center;">
			<a id="f-submit" href="#" class="easyui-linkbutton"
				data-options="iconCls:'icon-save'" onclick="javascript:submitForm()">确定</a>
			<a id="f-cancel" href="#" class="easyui-linkbutton"
				data-options="iconCls:'icon-cancel'" onclick="javascript:cancle()">取消</a>
		</div>
	</form>

方法实现：

	<script type="text/javascript">
	$(function() {
		intiMonthBox('updttimeS');
		intiMonthBox('updttimeE');
	});
    
	function intiMonthBox(id){
        var db = $('#' + id);
        db.datebox({
            onShowPanel: function () {//显示日趋选择对象后再触发弹出月份层的事件，初始化时没有生成月份层
            	if(monthIpt.css('display') != 'block'){
            		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); //月份，这里不需要+1
						 if(month<10) month="0"+month;
                        db.datebox('hidePanel')//隐藏日期对象
                                .datebox('setValue', year + '-' + month); //设置日期的值
                    });
                }, 0);
                yearIpt.unbind();//解绑年份输入框中任何事件
            },
            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: function (d) { 
                //解决月份小于10时，未加'0'问题
            	var yearstr = d.getFullYear();
            	var month = d.getMonth() + 1;
            	var monthstr = month<10? "0"+ month : month;                                   
            	return yearstr+ '-'+ monthstr;/*getMonth返回的是0开始的，忘记了。。已修正*/ 
            }
        });
        var p = db.datebox('panel'), //日期选择对象
                tds = false, //日期选择对象中月份
                aToday = p.find('a.datebox-current'),//日历框左下角今天按钮
                yearIpt = p.find('input.calendar-menu-year'),//年份输入框
                monthIpt = p.find('div.calendar-menu'),//月份框
                //显示月份层的触发控件
                span = aToday.length ? p.find('div.calendar-title span') : //1.3.x版本
				p.find('span.calendar-text');//1.4.x版本
        p.find('div.calendar-header').hide();
        if (aToday.length) {//1.3.x版本，取消Today按钮的click事件，重新绑定新事件设置日期框为今天，防止弹出日期选择面板
            aToday.unbind('click').click(function () {
                var now=new Date();
				var month = now.getMonth() + 1;
            	var monthstr = month<10? "0"+ month : month;
                db.datebox('hidePanel').datebox('setValue', now.getFullYear() + '-' + monthstr);
            });
        }
	}
	</script>