EasyUI修改datetimebox 时间选择框 加'清空'按钮 修改'今天 '事件

我们在使用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