wuxiren123

Web報表工具JS開發(fā)之日期校驗

在報表開發(fā)過程中，我們常常需要對查詢界面進(jìn)行日期校驗。例如有兩個參數(shù)：開始日期和結(jié)束日期，我們要校驗的是：開始日期與結(jié)束日期不能為空，結(jié)束日期必須在開始日期之后以及結(jié)束日期必須在開始日期后的某個時間段內(nèi)，否則提示相關(guān)信息，對此可以在查詢按鈕中增加事件。下面我們通過FineReport來介紹下具體的設(shè)置。

具體效果圖如下：

可以看出會報出如下錯誤。

模板的設(shè)計工作這邊就不重點講了，設(shè)定好如下的模板界面：

給查詢按鈕增加點擊事件，具體的JS代碼如下：

var start = this.options.form.getWidgetByName("starttime").getValue();  
var end = this.options.form.getWidgetByName("endtime").getValue();  
if( start == "" || start==null){  //判斷開始日期是否為空
  alert("錯誤,開始時間不能為空");   //開始日期參數(shù)為空時提示
  return false;  
};  
if(end == "" || end==null){  //判斷結(jié)束日期是否為空
  alert("錯誤,結(jié)束時間不能為空");   //結(jié)束日期參數(shù)為空時提示
  return false;  
};  
if( start > end){   //判斷開始日期是否大于結(jié)束日期
  alert("錯誤,開始時間不能大于結(jié)束時間");   //開始日期大于結(jié)束日期時提示  
  return false;  
}
var startdate = new Date(start);   //將開始日期轉(zhuǎn)化為Date型
var enddate = new Date(end);    //將結(jié)束日期轉(zhuǎn)化成Date型
var subdate = (enddate-startdate)/ (1000 *60 *60 *24);   //將兩個日期相減得出的毫秒數(shù)轉(zhuǎn)化為天數(shù)
if(subdate>15){    //判斷結(jié)束日期是否超過開始日期后15天
alert("錯誤,結(jié)束日期必須在開始日期15天之內(nèi)");    //結(jié)束日期超過開始日期后的十五天時提示
return false;
}

雖然在參數(shù)控件中也可以設(shè)置校驗，但是參數(shù)控件要點擊控件后才能進(jìn)行校驗，因此參數(shù)界面的不能為空以及比較校驗需要在查詢按鈕中設(shè)置，所以倒不如全放在查詢按鈕中進(jìn)行校驗。

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

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

var start = this.options.form.getWidgetByName("starttime").getValue();    
var end = this.options.form.getWidgetByName("endtime").getValue();    
if( start == "" || start==null){  //判斷開始日期是否為空  
  alert("錯誤,開始時間不能為空");   //開始日期參數(shù)為空時提示  
  return false;    
};    
if(end == "" || end==null){  //判斷結(jié)束日期是否為空  
  alert("錯誤,結(jié)束時間不能為空");   //結(jié)束日期參數(shù)為空時提示  
  return false;    
};    
if( start > end){   //判斷開始日期是否大于結(jié)束日期  
  alert("錯誤,開始時間不能大于結(jié)束時間");   //開始日期大于結(jié)束日期時提示    
  return false;    
}  
var aDate  =  start.split("-")  
var startdate =  new  Date(aDate[1]  +  '-'  +  aDate[2]  +  '-'  +  aDate[0])    //轉(zhuǎn)換為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)    //把相差的毫秒數(shù)轉(zhuǎn)換為天數(shù)  
alert(subdate);
if(subdate>15){    //判斷結(jié)束日期是否超過開始日期后15天  
alert("錯誤,結(jié)束日期必須在開始日期15天之內(nèi)");    //結(jié)束日期超過開始日期后的十五天時提示  
return false;  
}

posted on 2016-05-11 15:48 喝水居然長肉 閱讀(71) 評論(0)  編輯  收藏