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

最近想实现一个功能：选定开始日期时间(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 日期时间框