JS实现日期控件查询天数控制

1.1 版本

1.2 问题描述

参数面板有 2 个日期控件，开始时间和结束时间，想要判断开始时间不能大于结束时间，且两者间隔不超过 30 天。

1.3 实现思路

在查询按钮的点击事件中，利用 JS 获取日期控件值，判断日期间隔和日期大小，如果不满足规则就弹出提示并阻止查询。接口说明可以参考：控件通用

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 及以后，方案支持移动端，效果如下图所示：

注：历史低版本移动端示例可参考：移动端日期筛选控制

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\日期控件查询天数控制.cpt

点击下载模板：日期控件查询天数控制.cpt