使用easyui的datetimebox插件輸入日期，同時對日期進行驗證

進公司上班有一個月了，公司的項目界面都是用easyui做的，這裡總結一些遇到的easyui插件的問題，方便以後用到時可以參考。本次就先說說easyui的datetimebox插件。

1.多個時間輸入框，後面的時間一次比前一個輸入框時間大。如:time1<time2<time3.時間不正確時，會返回false，同時會有提示。

如下圖：

代碼如下：HTML代碼：

2. <td align="right" stylex="width:20%;">時間1：</td>
3. <td>
4. <input type="text" id="time1" stylex="width: 195px" required="true" editable="false"
5. class="easyui-datetimebox"/>
6. </td><br/>
7. <td align="right" stylex="width:20%;">時間2：</td>
8. <td>
9. <input type="text" id="time2" stylex="width: 195px" required="true" editable="false"
10. validType="TimeCheck["time1"]" invalidMessage="time2要大於time1"
11. class="easyui-datetimebox"/>
12. </td><br/>
13. <td align="right" stylex="width:20%;">時間3：</td>
14. <td>
15. <input type="text" id="time2" stylex="width: 195px" required="true" editable="false"
16. validType="TimeCheck["time2"]" invalidMessage="time3要大於time2"
17. class="easyui-datetimebox"/>
18. </td>

js代碼：

2. <script type="text/javascript">
4. $.extend($.fn.validatebox.defaults.rules,{
5. TimeCheck:{
6. validator:function(value,param){
7. var s = $("input[name="+param[0]+"]").val();
8. //因為日期是統一格式的所以可以直接比較字元串 否則需要Date.parse(_date)轉換
9. return value>=s;
10. },
11. message:"非法數據"
12. }
13. });
15. </script>

注釋：這種方法有個弊端，就是如果先輸入後面time2的日期，在輸入前面time1的日期，並且time2<time1的話，不會有提示，但是提交表單的時候，會返回false。

2.上面一個年份輸入框，選擇一個年份，下面輸入框的年份必須與上面所選年份相同。如圖：

HTML代碼：

2. <td align="right" stylex="width:20%;">年 份：</td>
3. <td>
4. <select id="year" stylex="width:195px;" class="easyui-combobox" panelHeight="auto" editable="false">
5. <option value="2014">2014</option>
6. <option value="2015">2015</option>
7. <option value="2016">2016</option>
8. </select>
9. </td><br/>
10. <td align="right" stylex="width:20%;">時間1：</td>
11. <td>
12. <input type="text" id="time1" validType="TimeCheck" invalidMessage="所選時間年份必須與所選年份相同" stylex="
13. width: 195px" required="true" editable="false" class="easyui-datetimebox"/>
14. </td><br/>
16. <td align="right" stylex="width:20%;">時間2：</td>
17. <td><span stylex="font-family: Arial, Helvetica, sans-serif;"><input type="text" id="time2" validType="TimeCheck" invalidMessage="所選時間年份必須與所選年份相同" stylex="width: 195px" required="true" editabl="false" class="easyui-datetimebox"/></td></span>

1. js代碼：
2. <script type="text/javascript">
3. $.extend($.fn.validatebox.defaults.rules,{
4. TimeCheck:{
5. validator:function(value,param){//value是所選文本的值，字元串類型
6. var y=$("#year").combobox("getValue").valueOf();//取出下拉框的值
7. var time=new Date(Date.parse(value.replace(/-/g, "/")));//將文本框自帶的值（字元串）轉換成Date類型
8. var t=time.getFullYear().valueOf(); //取得年份
9. return t==y;
10. },
11. message:"選擇時間年份必須與提案所在時間一致"
12. }
13. });
14. </script>

看下面代碼的結果，如圖，value和param的值。

2. $.extend($.fn.validatebox.defaults.rules,{
3. TimeCheck:{
4. validator:function(value,param){
5. console.info(value);
6. console.info(param);
7. console.info(param[0]);
8. }
9. }
10. });

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

注釋：HTML中的invalidMessage="所選時間年份必須與所選年份相同" 是當輸入的數據不合法是要顯示的信息，如果沒有ivalidMessage，就會顯示js中的message：『選擇時間年份必須與提案所在時間一致』，如果兩者都有的話，會顯示HTMl中的提示信息。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！