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

1.1 版本

1.2 应用场景

用户希望查询报表时选择结束时间后，开始时间自动选择为结束时间的前一个月，开始时间为空、结束时间为空、开始时间大于结束时间或两者相差超过 30 天时出现相关提示并阻止查询，如下图所示：

1.3 实现思路

1）设置两个数据集参数「start_time」、「end_time」并添加到参数面板绑定日期控件。「start_time」控件值设置为公式，「end_time」控件值设置为日期。

2）为查询按钮添加点击事件，利用 JS 获取日期控件值，判断开始时间是否为空、结束时间是否为空、开始时间是否大于结束时间、两者相差是否超过 30 天，满足条件则弹出提示并阻止查询。

注：接口说明详情参见 控件通用 。

2.1 准备数据

1）打开 FineReport 设计器，点击菜单栏「文件>新建普通报表」新建一张普通报表，如下图所示：

2）点击数据集管理面板的「+」按钮，选择「数据库查询」，新建数据集 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）进入报表设计界面， A1-E1 单元格分别输入文本内容，数据集管理面板的 ds1 中的部分数据列拖入 A2-E2 单元格，如下图所示：

2）选中 A1-E2 单元格，设置为「居中」，点击「边框」按钮，选择「所有框线」，如下图所示：

2.3 设置参数面板

1）点击参数面板的参数编辑按钮，点击「全部添加」将参数「start_time」、「end_time」添加到参数面板中，如下图所示：

2）分别点击参数面板中参数「start_time」、「end_time」的工具按钮绑定日期控件，如下图所示：

3）点击右侧的「控件设置」按钮，选择「start_time」，选择下方的「属性」。

4）控件值选择「公式」，输入公式：monthdelta($end_time,-1) ，即设置 end_time 日期之后，start_time 日期为 end_time 日期前一个月，点击「确定」，如下图所示：

5）继续点击右侧的「控件设置」按钮，选择「end_time」，选择下方的「属性」。

6）控件值选择「日期」，设置默认日期为「2010-03-16」，如下图所示：

7）继续点击右侧的「控件设置」按钮，选择「Search」，选择下方的「事件」。

8）点击「+」按钮，选择「点击」，设置点击事件，如下图所示：

JavaScript 代码如下所示：

var start =_g().getParameterContainer().getWidgetByName("start_time").getValue(); 
//获取start_time控件的值
var end = _g().getParameterContainer().getWidgetByName("end_time").getValue(); 
//获取end_time控件的值 
var startdate = new Date(start); //将开始日期转化为Date型
var enddate = new Date(end); //将结束日期转化成Date型
var subdate = (enddate - startdate) / (1000 * 60 * 60 * 24); //将两个日期相减得出的毫秒数转化为天数
if (start == "" || start == null) { //判断开始日期是否为空
FR.Msg.alert("提示","开始时间不能为空"); //开始日期参数为空时提示
return false;
};
if (end == "" || end == null) { //判断结束日期是否为空
FR.Msg.alert("提示","结束时间不能为空"); //结束日期参数为空时提示
return false;
};
if (start > end) {
	FR.Msg.alert("提示","开始时间不能大于结束时间!");
	//如果开始时间大于结束时间则提示
	return false;
	//阻止查询
}
if (subdate > 30) {
	FR.Msg.alert("提示","开始时间和结束时间相差不能大于30天!");
	//如果开始时间和结束时间相差30天以上则提示
	return false;
	//阻止查询
}

2.4 效果预览

2.4.1 PC 端

PC 端效果如下图所示：

2.4.2 移动端

APP 版本、HTML5 移动端展现插件版本升级至 11.0.76 及以后，方案支持移动端，以 APP 为例，效果如下图所示：

点击下载已完成模板：JS实现日期控件查询天数控制.cpt