最近公司有个老项目需要做二次开发,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);
}