当前位置: 首页 > 工具软件 > DateBox > 使用案例 >

easyUI中datebox只选择年月【亲测,亲改】

公冶泰
2023-12-01

最近公司有个老项目需要做二次开发,web端用的jsp,后端就不说了(跟标题无关)
因为一直使用laydate比较多,发现JSP中使用laydate简直有点崩溃,加上项目本身使用的就是datebox,没办法,改吧(。。。。)
目前网上的版本很多,无效的十之八九吧(也不能说无效,部分有效)
废话不多说,进入正题:
1,HTML 部分

<input class="easyui-datebox" id="grantPeriod" name="grantPeriod" data-options="formatter:myformatter"/>
(方法名抄网上的)
这里说句废话:formatter 是datebox 格式化日期用,例如:yyyyMMdd,yyyy-MM-dd,yyyy-MM...

2,JS部分:

$(function(){
	initDatebox('grantPeriod');
})
function initDatebox(id) {
	var db = $('#' + id);
	db.datebox({    
		onShowPanel : function() {// 显示日期选择对象后再触发弹出月份层的事件,初始化时没有生成月份层    
			span.trigger('click'); // 触发click事件弹出月份层
			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];//年份
					var month=parseInt($(this).attr('abbr'), 10);//月份
					if(month<10){
						month="0"+month;
					}
					//我所需要的是yyyyMM 所以下面是这样的,如果有其他需求,可以自做调整
					db.datebox('hidePanel')// 隐藏日期对象    
						.datebox('setValue', year + '' + month); // 设置日期的值    
				});
			}, 0);  
		},
		//这个是必须要的,不然你会发现你的输入框一直是当天日期
		parser: function (s) {
            if (!s) return new Date();
            //当然下面这里因为需求的问题,我只能截取(偷懒),如果没有特别的需求,上面日期格式可以yyyy-MM,
            //就可以用split了
            var year = s.substring(0,4);
            var month = s.substring(4,6);
            return new Date(parseInt(year, 10), parseInt(month, 10) - 1, 1);
        },
		formatter: function (d) { 
             var currentMonth = (d.getMonth()+1);
             var currentMonthStr = currentMonth < 10 ? ('0' + currentMonth) : (currentMonth + '');
             return d.getFullYear() + '' + currentMonthStr; 
         }
	});    
	var p = db.datebox('panel'); // 日期选择对象    
	//这里是抄的(大部分都抄的)网上版本大部分都是 calendar-text 你在页面上搜索会发现一件崩溃的事:“根本没有,我xxxx“
	var span = p.find('div.calendar-title span'); // 显示月份层的触发控件    
}
//这个呢 就是HTML中所用的了,需要跟上面的日期格式保持一致
function myformatter(date){
    var y = date.getFullYear();
    var m = date.getMonth()+1;
    return y+''+(m<10?('0'+m):m);
}
 类似资料: