［HTML5］JS 控制日期控件可查询天数- FineReport帮助文档

1. 概述

1.1 應用場景

用於 H5 端預覽報表時，控制日期可查詢的天數。

1.2 功能介紹

H5 端預覽報表時，開始時間與結束時間之間不得大於一個月，并且開始時間選擇後結束時間自動往後推一個月，超過一個月會有提示信息。

注：本文的開始時間和結束時間跟日期控件查詢天數控制中是不同的，此處開始時間>結束時間，這點需要注意。

2. 示例

2.1 數據準備

新建一張決策報表，在菜單欄模板>移動端屬性中将其設置爲手機端模板，新建數據集 ds1，輸入數據庫查詢語句：

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 參數控件的控件值插入公式：monthdelta($end_time,1)。

start_time 參數控件添加編輯結束事件，代碼如下：

var start = this.options.form.getWidgetByName("start_time").getValue(); 
var end = this.options.form.getWidgetByName("end_time");  
var day2 = new Date();day2.setTime(day2.getTime());
var s2 = day2.getFullYear()+"-" + (day2.getMonth()+1) + "-" + day2.getDate();
var s1 = start.substring(5,7);
var s3 = s2.substring(5,7);
var yy = start.substring(0,4);
var mm = start.substr(5,2);
var dd = new Date(yy,mm,0).getDate();
var day3 = start.substring(0,7);
var day4 = day3+ '-' +dd 
if(s1==s3){
end.setValue(s2); 
}else{  
end.setValue(day4); 
}顯示代碼

3）右邊 end_time 參數控件的控件值選擇固定日期2010/04/16。

end_time 參數控件添加編輯結束事件，代碼如下：

var start = this.options.form.getWidgetByName("start_time").getValue();  
var end = this.options.form.getWidgetByName("end_time").getValue();  
var endtimes = this.options.form.getWidgetByName("end_time");
var day3 = start.substring(0,7);
var yy = start.substring(0,4);
var startmm = start.substr(5,2);
var endmm = end.substr(5,2);
var dd = new Date(yy,startmm,0).getDate();
var day4 = day3+ '-' +dd
var day2 = new Date();
day2.setTime(day2.getTime());
var s2 = day2.getFullYear()+"-" + (day2.getMonth()+1) + "-" + day2.getDate();
var s2mm = (day2.getMonth()+1);
FR.Msg.alert = alert;
function alert(data, callback) { //回調函數
var alert_bg = document.createElement('div');
alert_box = document.createElement('div'),
alert_text = document.createElement('div'),
alert_btn = document.createElement('div'),
textNode = document.createTextNode(data ? data : ''),
btnText = document.createTextNode('确 定');
// 控制樣式
css(alert_bg, {
            'position': 'fixed',
            'top': '0',
            'left': '0',
            'right': '0',
            'bottom': '0',
            'background-color': 'rgba(0, 0, 0, 0.1)',
            'z-index': '999999999'
        });
css(alert_box, {
            'width': '270px',
            'max-width': '90%',
            'font-size': '16px',
            'text-align': 'center',
            'background-color': '#fff',
            'border-radius': '15px',
            'position': 'absolute',
            'top': '50%',
            'left': '50%',
            'transform': 'translate(-50%, -50%)'
        });
css(alert_text, {
            'padding': '10px 15px',
            'border-bottom': '1px solid #ddd'
        });
css(alert_btn, {
            'padding': '10px 0',
            'color': '#007aff',
            'font-weight': '600',
            'cursor': 'pointer'
        });
        // 内部結構套入
        alert_text.appendChild(textNode);
        alert_btn.appendChild(btnText);
        alert_box.appendChild(alert_text);
        alert_box.appendChild(alert_btn);
        alert_bg.appendChild(alert_box);
        // 整體顯示到頁面内
        document.getElementsByTagName('body')[0].appendChild(alert_bg);
        // 确定綁定點擊事件删除标簽
        alert_btn.onclick = function() {
            alert_bg.parentNode.removeChild(alert_bg);
            if (typeof callback === 'function') {
                callback(); //回調
            }
        }
    }
    function css(targetObj, cssObj) {
        var str = targetObj.getAttribute("style") ? targetObj.getAttribute('style') : '';
        for (var i in cssObj) {
            str += i + ':' + cssObj[i] + ';';
        }
        targetObj.style.cssText = str;
    }
var starttime = this.options.form.getWidgetByName("start_time").getValue();  
var time = starttime.substring(1,4);
var Year = new Date().getFullYear(), s = 0, d;
                for (var i = 1; i < 13; i++) {
                    d = new Date(time, i, 0);
                    s += d.getDate();
                };
if(end > s2 || endmm != startmm  && s2mm == startmm) {
  if(end > s2 && endmm == startmm){
   alert("結束時間不能超過今天。"); 
  endtimes.setValue(s2);
  };
    if(s2mm ==startmm && endmm != startmm){
alert("不支持跨月查詢，請重新查詢。"); 
endtimes.setValue(s2);
};
};
 if(endmm != startmm && startmm != s2mm){
   alert("不支持跨月查詢，請重新查詢。"); 
  endtimes.setValue(day4);
 }顯示代碼