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

1.1 问题描述

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

1.2 实现思路

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

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 和 end_time 添加到参数面板，绑定日期控件。

2.3 设置点击事件

选中参数面板的查询按钮，添加 JS 点击事件：

JavaScript 代码如下：

var start = _g().parameterEl.getWidgetByName("start_time").getValue(); 
//获取start_time控件的值
var end = _g().parameterEl.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 效果预览

保存报表，点击分页预览，效果如下图所示：

注：不支持移动端，H5 端实现该功能参见文档：移动端日期筛选控制

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