JS date widget query days control

1) Problem description

The parameter panel has two date widgets, the start time and the end time. To determine whether the start time cannot be longer than the end time, and the interval between the two widgets cannot be more than 30 days.

2) Implementation roadmap

In the click event of the query button, JS is used to obtain the date widget value to judge the date interval and date size. If the rule is not met, a prompt will pop up and prevent the query. For interface description, see widget interface.

1. Data preparation

Create a new dataset ds1 and enter the data query statement:

SELECT * FROM ORDERS where 1=1 

${if(len(start_time)=0,""," and SIGNDATE>='"+start_time+"'")}

${if(len(end_time)=0,""," and SIGNDATE<='"+end_time+"'")}

2. Template design

1) Design the report style as shown below:

2) Enter the parameter panel editing interface, add parameters start_time and end_time to the parameter panel, and bind the date widget.

3. Setting click events

Select the Query button in the parameter panel and add JS click event:

The JavaScript code is as follows:

var start = _g().parameterEl.getWidgetByName("start_time").getValue(); 
var end = _g().parameterEl.getWidgetByName("end_time").getValue(); 
if (start > end) {
	alert("start time cannot be later than the end time!");
	return false;
}
var subdate = (new Date(end) - new Date(start)) / (1000 * 60 * 60 * 24); 
if (subdate > 30) {
	alert("The difference between the start time and end time cannot be greater than 30 days!");
	return false;
}

4. Effect preview

Save the report, click Pagination Preview, the effect is as shown below:

Note: Mobile is not supported. For H5 terminal to achieve this function, please refer to the document: Date filtering widget on mobile terminal

Click to download the template: 

JS_date_widget_ query_days_control.cpt