Web報表工具JS開發之日期校驗

在報表開發過程當中，咱們經常須要對查詢界面進行日期校驗。例若有兩個參數：開始日期和結束日期，咱們要校驗的是：開始日期與結束日期不能爲空，結束日期必須在開始日期以後以及結束日期必須在開始日期後的某個時間段內，不然提示相關信息，對此能夠在查詢按鈕中增長事件。下面咱們經過FineReport來介紹下具體的設置。

具體效果圖以下：

能夠看出會報出以下錯誤。

模板的設計工做這邊就不重點講了，設定好以下的模板界面：

給查詢按鈕增長點擊事件，具體的JS代碼以下： Js代碼 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;
}

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; }

雖然在參數控件中也能夠設置校驗，可是參數控件要點擊控件後才能進行校驗，所以參數界面的不能爲空以及比較校驗須要在查詢按鈕中設置，因此倒不如全放在查詢按鈕中進行校驗。

設置完查看模板，選擇開始時間和結束時間，使這兩個日期之間相差超過15天，就會彈出上述對話框。

由於FineReport的報表界面是在前段展現，我特意把各類瀏覽器試了個遍。剛剛上述的js代碼在火狐，谷歌IE9等瀏覽器下沒有問題，可是在IE8以及IE8如下的IE瀏覽器版本中，判斷兩個日期之間的差值的警告框則不會起做用。能夠換用如下代碼：

Js代碼 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;
}

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; }