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

港控/mmm° 2022-06-16 06:19 713阅读 0赞

我们在使用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][http_download.csdn.net_detail_feifuzeng_9836263]

[http_download.csdn.net_detail_feifuzeng_9836263]: http://download.csdn.net/detail/feifuzeng/9836263