JS實現日期元件查詢天數控制

1.1 版本

1.2 問題描述

參數面板有 2 個日期元件，開始時間和結束時間，想要判斷開始時間不能大於結束時間，且兩者間隔不超過 30 天。

1.3 實現思路

在查詢按鈕的點選事件中，利用 JS 獲取日期元件值，判斷日期間隔和日期大小，如果不滿足規則就彈出提示並阻止查詢。API說明可以參考：元件通用

2.1 資料準備

建立資料集 ds1，SQL 查詢語句為：

SELECT * FROM 訂單 where 1=1 

${if(len(start_time)=0,""," and 訂購日期>='"+start_time+"'")}

${if(len(end_time)=0,""," and 訂購日期<='"+end_time+"'")}

2.2 範本設計

1）如下圖設計報表樣式

2）進入參數面板編輯介面，將參數 start_time 和 end_time 新增到參數面板，綁定日期元件。

2.3 設定點選事件

選中參數面板的查詢按鈕，新增 JS 點擊事件：

JavaScript 程式碼如下：

var start =_g().getParameterContainer().getWidgetByName("start_time").getValue(); 
//獲取start_time元件的值
var end = _g().getParameterContainer().getWidgetByName("end_time").getValue(); 
//獲取end_time元件的值 
if (start > end) {
	alert("開始時間不能大於結束時間!");
	//如果開始時間大於結束時間則提示
	return false;
	//阻止查詢
}
var subdate = (new Date(end) - new Date(start)) / (1000 * 60 * 60 * 24); 
//將開始時間和結束時間相減得出的毫秒數轉化為天數
if (subdate > 30) {
	alert("開始時間和結束時間相差不能大於30天!");
	//如果開始時間和結束時間差了30天以上則提示
	return false;
	//阻止查詢
}

2.4 效果預覽

2.4.1 PC 端

儲存報表，點選分頁預覽，效果如下圖所示：

2.4.2 行動端

版本11.0.11，APP\H5 升級至 11.0.76 及以後，方案支援行動端，效果如下圖所示：

注：歷史低版本行動端範例可參考：行動端日期篩選控制

點選下載範本：日期元件查詢天數控制.cpt