JS實現日期控件校驗

1.1 問題描述

參數查詢時，可以對控件值做一些簡單校驗，如不能爲空，當需要一些複雜校驗時，設計器自帶的校驗規則就無法滿足了。例如有兩個參數：開始日期和結束日期，校驗規則爲：

1）開始日期與結束日期不能爲空，結束日期必須在開始日期之後

2）結束日期必須在開始日期後的某個時間段内，否則給出提示

效果如下圖所示，這該如何實現呢？

1.2 實現思路

通過給「查詢按鈕」控件添加 JS 實現。利用 this.options.form.getWidgetByName("starttime").getValue() 獲取到兩個日期控件的值，然後對獲取的日期值進行校驗。

2.1 準備模板

準備内置模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Parameter\TimeScale\TimeScale.cpt

點擊可下載模板：TimeScale.cpt

模板參數界面如下圖所示：

2.2 添加事件

點擊「查詢按鈕」，爲其添加一個「點擊」事件，如下圖所示：

JavaScript 代碼如下：

注：雖然參數控件中也可以設置校驗，但是參數控件要點擊控件後才能進行校驗，因此參數界面的不能爲空以及比較校驗需要在查詢按鈕中設置。

var start = this.options.form.getWidgetByName("starttime").getValue();  
var end = this.options.form.getWidgetByName("endtime").getValue();  
if( start == "" || start==null){  //判斷開始日期是否爲空
  alert("錯誤,開始時間不能爲空");   //開始日期參數爲空時提示
  return false;  
};  
if(end == "" || end==null){  //判斷結束日期是否爲空
  alert("錯誤,結束時間不能爲空");   //結束日期參數爲空時提示
  return false;  
};  
if( start > end){   //判斷開始日期是否大於結束日期
  alert("錯誤,開始時間不能大於結束時間");   //開始日期大於結束日期時提示  
  return false;  
}
var startdate = new Date(start);   //将開始日期轉化爲Date型
var enddate = new Date(end);    //将結束日期轉化成Date型
var subdate = (enddate-startdate)/ (1000 *60 *60 *24);   //将兩個日期相減得出的毫秒數轉化爲天數
if(subdate>15){    //判斷結束日期是否超過開始日期後15天
alert("錯誤,結束日期必須在開始日期15天之内");    //結束日期超過開始日期後的十五天時提示
return false;
}
顯示代碼

在 IE8 及以下的 IE 浏覽器使用時，若判斷兩個日期之間的差值的警告框不起作用。可用以下代碼：

var start = this.options.form.getWidgetByName("starttime").getValue();    
var end = this.options.form.getWidgetByName("endtime").getValue();    
if( start == "" || start==null){  //判斷開始日期是否爲空  
  alert("錯誤,開始時間不能爲空");   //開始日期參數爲空時提示  
  return false;    
};    
if(end == "" || end==null){  //判斷結束日期是否爲空  
  alert("錯誤,結束時間不能爲空");   //結束日期參數爲空時提示  
  return false;    
};    
if( start > end){   //判斷開始日期是否大於結束日期  
  alert("錯誤,開始時間不能大於結束時間");   //開始日期大於結束日期時提示    
  return false;    
}  
var aDate  =  start.split("-")  
var startdate =  new  Date(aDate[1]  +  '-'  +  aDate[2]  +  '-'  +  aDate[0])    //轉換爲MM-dd-yyyy格式  
alert(startdate);
var aDate  =  end.split("-")  
var enddate  =  new  Date(aDate[1]  +  '-'  +  aDate[2]  +  '-'  +  aDate[0])  
alert(enddate);
var subdate=  ((enddate  -  startdate)  /1000/  60/60/24)    //把相差的毫秒數轉換爲天數  
alert(subdate);
if(subdate>15){    //判斷結束日期是否超過開始日期後15天  
alert("錯誤,結束日期必須在開始日期15天之内");    //結束日期超過開始日期後的十五天時提示  
return false;  
}
顯示代碼

移動端 JavaScript 代碼如下：

var start = this.options.form.getWidgetByName("starttime").getValue();
var end = this.options.form.getWidgetByName("endtime").getValue();
var startdate = new Date(start); //将開始日期轉化爲Date型
var enddate = new Date(end); //将結束日期轉化成Date型
var subdate = (enddate - startdate) / (1000 * 60 * 60 * 24); //将兩個日期相減得出的毫秒數轉化爲天數
if(start == "" || start == null) { //判斷開始日期是否爲空
    alert("錯誤,開始時間不能爲空");
} else if(end == "" || end == null) { //判斷結束日期是否爲空
    alert("錯誤,結束時間不能爲空");
} else if(start > end) { //判斷開始日期是否大於結束日期
    alert("錯誤,開始時間不能大於結束時間");
} else if(subdate > 15) { //判斷結束日期是否超過開始日期後15天
    alert("錯誤,結束日期必須在開始日期15天之内");
} else {
    _g().parameterCommit();
}
顯示代碼

2.3 效果預覽

保存模板，點擊「分頁預覽」，選擇開始時間和結束時間，使這兩個日期之間相差超過 15 天，就會彈出校驗對話框。如下圖所示：

1）PC 端

2）移動端

若爲單元格天百控件，也可以使用此方法進行校驗。效果如下圖所示：

3.1 準備模板

新建模板，在單元格中添加「日期控件」，設置控件名爲 starttime、endtime，格式改爲時間型，并添加一個按鈕控件。如下圖所示：

3.2 添加事件

點擊「按鈕控件」，爲其添加一個「點擊」事件，如下圖所示：

JavaScript 代碼如下：

相比較參數面板中「按鈕控件」的JS，只需要将 this.options.form.getWidgetByName("starttime") 修改爲contentPane.getWidgetByName("starttime") 。

var start = contentPane.getWidgetByName("starttime").getValue();
var end = contentPane.getWidgetByName("endtime").getValue();
if (start == "" || start == null) { //判斷開始日期是否爲空
alert("錯誤,開始時間不能爲空"); //開始日期參數爲空時提示
return false;
};
if (end == "" || end == null) { //判斷結束日期是否爲空
alert("錯誤,結束時間不能爲空"); //結束日期參數爲空時提示
return false;
};
if (start > end) { //判斷開始日期是否大於結束日期
alert("錯誤,開始時間不能大於結束時間"); //開始日期大於結束日期時提示  
return false;
}
var startdate = new Date(start); //将開始日期轉化爲Date型
var enddate = new Date(end); //将結束日期轉化成Date型
var subdate = (enddate - startdate) / (1000 * 60 * 60 * 24); //将兩個日期相減得出的毫秒數轉化爲天數
if (subdate > 15) { //判斷結束日期是否超過開始日期後15天
alert("錯誤,結束日期必須在開始日期15天之内"); //結束日期超過開始日期後的十五天時提示
return false;
}
顯示代碼

3.3 效果預覽

保存模板，點擊「填報預覽」，效果如下圖所示：

已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\參數界面JS實例\18-JS實現日期控件校驗.cpt

點擊下載模板：18-JS實現日期控件校驗.cpt