easyUI中使用datatimebox选定开始日期时间后自动带出7天之后的结束日期时间

时间:2021-08-18 15:53:14

最近想实现一个功能:选定开始日期时间(date1)后,结束日期时间(date2)的显示框能自动增加7天,并显示。使用的日期时间控件是easyui的datetimebox。
背景介绍:1)datetimebox是和一个input文本框绑定的,在选择了日期时间,点击“确定”按钮之后,会自动写入文本框中。2)使用jquery。
前期遇到的问题
1)刚开始想采用datetimebox和datebox都有的事件onSelect来处理,但这个事件是在日期控件中选择日期时触发的,datetimebox中无法获得时间,也就是获取不了时分秒。onSelect事件的使用如下:

$("#date1").datebox{
onSelect: function(date){
var end= new Date(date.getTime() + 7*24*60*60*1000).formatDate("yyyy-MM-dd HH:mm:ss");
$("#date2").datetimebox("setValue", end);
}
}

2)在网上搜了很长时间,datetimebox控件中的“确定”按钮没有向开发者提供点击事件,貌似只是控件内部使用,开发者无法像onSelect那样监听(不是十分确定这个“确定”按钮的点击事件是不是可用)。
3)经过分析,因为datetimebox选定日期时间后会回写到input中,因此我就添加了input的change事件,但实际上日期时间选定回写到input之后,input中的日期是改变了,但change事件并没有触发(还不太清楚为什么)。
解决办法:
后来我使用mouseout来监听显示开始日期时间的文本框,在每次选定开始日期时间之后,这个事件触发了。代码如下:

$("#date1_div").find("#date1_input").bind("mouseout",function(){
var startStr = $('#date1').datetimebox("getValue"); //获取开始日期时间,返回的是一个string类型
//将日期中的“-”替换为“/”,Date对象才能将其转换为毫秒数
var startMills = Date.parse(startStr.replace(/-/g,"/"));
var startDate = new Date(startMills);
var endDate= new Date(startDate.getTime() + 7*24*60*60*1000).formatDate("yyyy-MM-dd HH:mm:ss"); //增加7天
$("#date2").datetimebox("setText", endDate); //写入到结束日期控件中
});

通过上面的代码,功能是实现了。虽然在原理上我还解释不通mouseout事件为什么好使(因为在选择开始日期时间,点击“确定”之后鼠标并没有经过input框,只是把日期时间值回写进去了),但功能上可行了,先贴出代码,欢迎大家指正讨论。
关于datetimebox和datebox的简短对比可参看博客:jQuery EasyUI - DateTimeBox 日期时间框