我们在使用EasyUI时 会发现，datetimebox 并非能很好的满足某些需求
1.开始时间与结束时间有联动(即开始时间选择之后，结束时间选择框不能选择开始时间选择框所选之前时间，结束时间同理)
2.点击'今天'、'清空'按钮时同时实现1所述联动
博主在研究过各种实现方法之后，总结出以下方法
博主不才，若有更好的方法，欢迎交流。
以下方法是基于easyUI 1.4版本设计的
使用方法： 页面直接调用initButtons(start,end)， initDateTimeBox(start,end)两个方法
其中start和end为开始和结束时间选择框的id
/** * 该js为修改datetimebox 下面按钮并添加相应事件 * @param start 元素id * @param end 元素id */ //设置 datetimebox时间选择框下面按钮 function initDatetimeboxButtons(start,end){ // var buttons = $.extend([], $.fn.datetimebox.defaults.buttons); //该buttons必须在调用该js的页面获取 buttons.splice(0, 0, { text: '今天', handler: function (target) {//target对象就是当前的inupt对象，不需要写死id //1.先赋予选择框当前时间并关闭日历表 var date = new Date(); var strDate = date.getFullYear()+"-"; strDate += date.getMonth()+1+"-"; strDate += date.getDate()+"- "; strDate += date.getHours()+":"; strDate += date.getMinutes()+":"; strDate += date.getSeconds(); $(target).datetimebox('setValue', strDate); $(this).closest("div.combo-panel").panel("close"); if(start==target.id){ //2.验证结束时间可选择范围并保存之前输入值 var endTime=$('#'+end).datetimebox('getValue'); $('#'+end).datetimebox().datetimebox('calendar').calendar({ validator: function(date){ return date>=new Date(new Date()-24*60*60*1000);//可选择时间必须大于等于 starttime } }); $('#'+end).datetimebox('setValue', endTime); } if(end==target.id){ //2.验证结束时间可选择范围并保存之前输入值 var startTime=$('#'+start).datetimebox('getValue'); $('#'+start).datetimebox().datetimebox('calendar').calendar({ validator: function(date){ return date<=new Date();//可选择时间必须小于等于今天 } }); $('#'+start).datetimebox('setValue', startTime); } } }); buttons.splice(1, 1, { text: '清空', handler: function (target) {//target对象就是当前的inupt对象，不需要写死id $(target).datetimebox('setValue', ''); $(this).closest("div.combo-panel").panel("close"); if(start==target.id){ var endTime=$('#'+end).datetimebox('getValue'); $('#'+end).datetimebox().datetimebox('calendar').calendar({ validator: function(date){ return true;//所有时间均可选 } }); $('#'+end).datetimebox('setValue', endTime); } if(end==target.id){ var startTime=$('#'+start).datetimebox('getValue'); $('#'+start).datetimebox().datetimebox('calendar').calendar({ validator: function(date){ return true;//所有时间均可选 } }); $('#'+start).datetimebox('setValue', startTime); } } }); } //设置datetimebox选择事件 function initDateTimeBox(start,end){ $('#'+start).datetimebox({ onSelect : function(starttime){ var endtime=$('#'+end).datetimebox('getValue'); $('#'+end).datetimebox().datetimebox('calendar').calendar({ validator: function(date){ return starttime<=date;//可选择时间必须大于等于 starttime } }); $('#'+end).datetimebox('setValue', endtime); } }); $('#'+end).datetimebox({ onSelect : function(endtime){ var starttime=$('#'+start).datetimebox('getValue'); $('#'+start).datetimebox().datetimebox('calendar').calendar({ validator: function(date){ return endtime>=date;//可选时间必须小于等于endtime } }); $('#'+start).datetimebox('setValue', starttime); } }); } /** * 该js为修改datebox 下面按钮并添加相应事件 * @param start 元素id * @param end 元素id */ //设置 datebox时间选择框下面按钮 function initDateboxButtons(start,end){ // var buttons = $.extend([], $.fn.datebox.defaults.buttons); //该buttons必须在调用该js的页面获取 dateboxButtons.splice(0, 0, { text: '今天', handler: function (target) {//target对象就是当前的inupt对象，不需要写死id //1.先赋予选择框当前时间并关闭日历表 var date = new Date(); var strDate = date.getFullYear()+"-"; strDate += date.getMonth()+1+"-"; strDate += date.getDate()+"- "; strDate += date.getHours()+":"; strDate += date.getMinutes()+":"; strDate += date.getSeconds(); $(target).datebox('setValue', strDate); $(this).closest("div.combo-panel").panel("close"); if(start==target.id){ //2.验证结束时间可选择范围并保存之前输入值 var endTime=$('#'+end).datebox('getValue'); $('#'+end).datebox().datebox('calendar').calendar({ validator: function(date){ return date>=new Date(new Date()-24*60*60*1000);//可选择时间必须大于等于 starttime } }); $('#'+end).datebox('setValue', endTime); } if(end==target.id){ //2.验证结束时间可选择范围并保存之前输入值 var startTime=$('#'+start).datebox('getValue'); $('#'+start).datebox().datebox('calendar').calendar({ validator: function(date){ return date<=new Date();//可选择时间必须小于等于今天 } }); $('#'+start).datebox('setValue', startTime); } } }); dateboxButtons.splice(1, 1, { text: '清空', handler: function (target) {//target对象就是当前的inupt对象，不需要写死id $(target).datebox('setValue', ''); $(this).closest("div.combo-panel").panel("close"); if(start==target.id){ var endTime=$('#'+end).datebox('getValue'); $('#'+end).datebox().datebox('calendar').calendar({ validator: function(date){ return true;//所有时间均可选 } }); $('#'+end).datebox('setValue', endTime); } if(end==target.id){ var startTime=$('#'+start).datebox('getValue'); $('#'+start).datebox().datebox('calendar').calendar({ validator: function(date){ return true;//所有时间均可选 } }); $('#'+start).datebox('setValue', startTime); } } }); } //设置datebox选择事件 function initdatebox(start,end){ $('#'+start).datebox({ onSelect : function(startTime){ var endtime=$('#'+end).datebox('getValue'); $('#'+end).datebox().datebox('calendar').calendar({ validator: function(date){ return startTime<=date;//可选择时间必须大于等于 starttime } }); $('#'+end).datebox('setValue', endtime); } }); $('#'+end).datebox({ onSelect : function(endtime){ var starttime=$('#'+start).datebox('getValue'); $('#'+start).datebox().datebox('calendar').calendar({ validator: function(date){ return endtime>=date;//可选时间必须小于等于endtime } }); $('#'+start).datebox('setValue', starttime); } }); }
源码示例：
http://download.csdn.net/detail/feifuzeng/9836263
