[HTML5] JS Control Date Widget Query Number of Days

1. Application scenarios

When it is used to preview the report on the H5 terminal, it controls the number of days that the date can be queried.

2. Function introduction

When previewing the report on the H5 terminal, the interval between the start time and the end time should not be more than one month, and the end time will automatically be pushed back one month after the start time is selected, and there will be a prompt message if it exceeds one month.

Note: The start time and end time of this article are different from those in   JS date widget query days control here start time> end time, this point needs attention.

1. Data preparation

Create a new dashboard, set it as the mobile terminal template in the menu barTemplate> Mobile Attribute, create a new dataset ds1, and enter the database query statement:

SELECT * FROM SIndent where 1=1

${if(len(start_time)=0,""," and Order_date<='"+start_time+"'")}

${if(len(end_time)=0,""," and Order_date>='"+end_time+"'")}

2. Report design

1) Drag the parameter panel into the main body of the dashboard design, and add two date widgets.

2) The formula for inserting the widget value of thestart_time parameter widget on the left: monthdelta($end_time,1).

Thestart_time parameter widget adds an Editing End event, the code is as follows:

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) Select the fixed date 2010/04/16 for the widget value of the end_time parameter widget on the right.

The end_time parameter widget adds anEditing End event, the code is as follows:

 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('Confirm');

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("The end time cannot exceed today."); 
  endtimes.setValue(s2);
  };
    if(s2mm ==startmm && endmm != startmm){
alert("Cross-month query is not supported, please check again."); 
endtimes.setValue(s2);
};
};
 if(endmm != startmm && startmm != s2mm){
   alert("Cross-month query is not supported, please check again."); 
  endtimes.setValue(day4);
 }

4) Drag the report block into the dashboard , and design the content of the table as shown in the figure below.

5) The final report style is shown in the figure below:

3. Effect preview

The H5 report preview effect is shown in the figure below:

The completed template can be found in: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\JS\[HTML5]_JS_control_date_widget_query_the_number_of_days.frm

Click to download the template:

[HTML5]_JS_control_date_widget_query_the_number_of_days.frm