使用easyui的datetimebox插件输入日期，同时对日期进行验证。

进公司上班有一个月了，公司的项目界面都是用easyui做的，这里总结一些遇到的easyui插件的问题，方便以后用到时可以参考。本次就先说说easyui的datetimebox插件。

1.多个时间输入框，后面的时间一次比前一个输入框时间大。如:time1<time2<time3.时间不正确时，会返回false，同时会有提示。

如下图：

代码如下：HTML代码：


 
 
   
   
    
    
   
   
   
   
    
    
     
     <td align="right" style="width:20%;">时间1：
     
     </td>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <td>
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     <input type="text" id="time1" style="width: 195px" required="true" editable="false"
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     class=
     
     "easyui-datetimebox"/>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </td>
     
     <br/>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <td align="right" style="width:20%;">时间2：
     
     </td>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <td>
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     <input type="text" id="time2" style="width: 195px" required="true" editable="false"
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     validType=
     
     "TimeCheck['time1']" 
     
     invalidMessage=
     
     "time2要大于time1"
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     class=
     
     "easyui-datetimebox"/>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </td>
     
     <br/>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <td align="right" style="width:20%;">时间3：
     
     </td>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <td>
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     <input type="text" id="time2" style="width: 195px" required="true" editable="false"
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     validType=
     
     "TimeCheck['time2']" 
     
     invalidMessage=
     
     "time3要大于time2" 
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     class=
     
     "easyui-datetimebox"/>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </td>

js代码：


 
 
   
   
    
    
   
   
   
   
    
    
     
     <script type="text/javascript">
     
      
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     $.extend($.fn.validatebox.defaults.rules,{
    
    
   
   

   
   
    
    
   
   
   
   
    
    	 
     
     TimeCheck:{
    
    
   
   

   
   
    
    
   
   
   
   
    
    	 
     
     validator:
     
     function(value,param){     
    
    
   
   

   
   
    
    
   
   
   
   
    
    	 
     
     var s = $(
     
     "input[name="+param[
     
     0]+
     
     "]").val();
    
    
   
   

   
   
    
    
   
   
   
   
    
    	     
     
     //因为日期是统一格式的所以可以直接比较字符串 否则需要Date.parse(_date)转换
    
    
   
   

   
   
    
    
   
   
   
   
    
    	 
     
     return value>=s;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     	 },
    
    
   
   

   
   
    
    
   
   
   
   
    
    	 
     
     message:
     
     '非法数据'
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     	 }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
      });
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </script>

注释：这种方法有个弊端，就是如果先输入后面time2的日期，在输入前面time1的日期，并且time2<time1的话，不会有提示，但是提交表单的时候，会返回false。

2.上面一个年份输入框，选择一个年份，下面输入框的年份必须与上面所选年份相同。如图：

HTML代码：


 
 
   
   
    
    
   
   
   
   
    
    
     
     <td align="right" style="width:20%;">年  份：
     
     </td>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <td>
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     <select id="year" style="width:195px;" class="easyui-combobox" panelHeight="auto" editable="false">
    
    
   
   

   
   
    
    
   
   
   
   
    
    		
     
     <option value="2014">2014
     
     </option>
    
    
   
   

   
   
    
    
   
   
   
   
    
    		
     
     <option value="2015">2015
     
     </option>
    
    
   
   

   
   
    
    
   
   
   
   
    
    		
     
     <option value="2016">2016
     
     </option>
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     </select>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </td>
     
     <br/>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <td align="right" style="width:20%;">时间1：
     
     </td>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <td>
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     <input type="text" id="time1" validType="TimeCheck" invalidMessage="所选时间年份必须与所选年份相同"  style="
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     	width: 195px" 
     
     required=
     
     "true" 
     
     editable=
     
     "false" 
     
     class=
     
     "easyui-datetimebox"/>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </td>
     
     <br/>
    
    
   
   

   
   
    
    
   
   
   
   
    
    			
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <td align="right" style="width:20%;">时间2：
     
     </td>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <td>
     
     <span style="font-family: Arial, Helvetica, sans-serif;">
     
     <input type="text" id="time2" validType="TimeCheck" invalidMessage="所选时间年份必须与所选年份相同"  style="width: 195px" required="true" editabl="false" class="easyui-datetimebox"/>
     
     </td>
     
     </span>

js代码：


 
 
   
   
    
    
   
   
   
   
    
    
     
     <script type="text/javascript">
     
     	
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     $.extend($.fn.validatebox.defaults.rules,{
    
    
   
   

   
   
    
    
   
   
   
   
    
    	   
     
     TimeCheck:{
    
    
   
   

   
   
    
    
   
   
   
   
    
    	    
     
     validator:
     
     function(value,param){
     
     //value是所选文本的值，字符串类型
    
    
   
   

   
   
    
    
   
   
   
   
    
    		
     
     var y=$(
     
     '#year').combobox(
     
     'getValue').valueOf();
     
     //取出下拉框的值
    
    
   
   

   
   
    
    
   
   
   
   
    
    		
     
     var time=
     
     new 
     
     Date(
     
     Date.parse(value.replace(
     
     /-/g, 
     
     "/")));
     
     //将文本框自带的值（字符串）转换成Date类型
    
    
   
   

   
   
    
    
   
   
   
   
    
    		
     
     var t=time.getFullYear().valueOf();   
     
     //取得年份
    
    
   
   

   
   
    
    
   
   
   
   
    
    	    	
     
     return t==y;		
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     	    },
    
    
   
   

   
   
    
    
   
   
   
   
    
    	    
     
     message:
     
     '选择时间年份必须与提案所在时间一致'
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     	   }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     	  });
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </script>

看下面代码的结果，如图，value和param的值。


 
 
   
   
    
    
   
   
   
   
    
    
     
     $.extend($.fn.validatebox.defaults.rules,{
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     		TimeCheck:{
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     		    validator:function(value,param){  
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     			console.info(value);
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     			console.info(param);
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     			console.info(param[0]);
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     		    }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     		   }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     	  });

<input class="easyui-datetimebox"  type="text" id="beginDate" name="beginDate" validType="TimeCheck['a1','a2']" style="width: 195px" required="true" editable="false"/>