1. 概述
1.1 版本
| 报表服务器版本 | 插件版本 | 功能变更 |
|---|---|---|
| 11.0.5 | V1.0 | - |
1.2 应用场景
安装此插件预览后可实现选择日期区间，可在普通报表、决策报表中使用。如下图所示：
1.3 功能描述
预览时支持点击日期选择开始日期、结束日期，同时支持点击底部快捷按钮选择开始日期、结束日期。
快捷按钮说明如下表所示：
| 按钮名称 | 说明 |
|---|---|
| 清空 | 清空所选日期 |
| 今天 | 开始日期、结束日期均为今天 |
| 昨天 | 开始日期、结束日期均为昨天 |
| 本月 | 本月 1 号到本月最后一天 |
| 上月 | 上月 1 号到上月最后一天 |
| 本季度 | 本季度 1 号到本季度最后一天 |
| 上季度 | 上季度 1 号到上季度最后一天 |
| 当年 | 当年 1 月 1 号到今天 |
| 去年 | 去年 1 月 1 号到 12 月 31 号 |
2. 插件介绍
2.1 插件安装
点击下载插件：日期区间控件
设计器插件安装方法请参见：设计器插件管理
服务器安装插件方法请参见：服务器插件管理
安装插件后需要重启才能生效
2.2 如何添加
2.2.1 参数控件
安装此插件后，将参数面板控件工具栏中的「日期区间控件」拖入到参数面板中。如下图所示：
2.2.2 填报控件
安装此插件后，选中单元格，点击右侧属性面板的「控件设置」，选择控件处下拉选择「日期区间控件」。如下图所示：
2.3 属性
2.3.1 参数控件
日期区间控件为参数控件时的属性界面，如下图所示：
各设置项及其说明如下表所示：
| 设置项 | 说明 | |
|---|---|---|
| 基本 | 控件名称 | 控件的名称，手动输入，通常与参数结合使用，如通过控件名获取控件后将控件值传递给对应参数，默认为 vueDateEditor0 |
| 可用 | 控件是否可用，勾选后，预览页面控件可用；不勾选，预览页面控件灰化，不可用，默认勾选 | |
| 可见 | 控件是否可见，勾选后，预览页面显示控件；不勾选，预览页面不显示控件，默认勾选 | |
| 坐标.尺寸 | 控件位置 | 控件在参数面板中的位置，通过横纵坐标调整，坐标会根据控件在参数面板中的位置自动显示 |
| 控件大小 | 控件的大小，通过宽度、高度调整，若通过拖拽调整，高宽度也随着自动调整 | |
2.3.2 填报控件
日期区间控件为填报控件时的属性界面，如下图所示：
各设置项及其说明如下表所示：
| 设置项 | 说明 | |
|---|---|---|
| 基本 | 控件名称 | 控件的名称，手动输入，通常与参数结合使用，如通过控件名获取控件后将控件值传递给对应参数，默认为 无 |
| 可用 | 控件是否可用，勾选后，填报预览页面控件可用；不勾选，填报预览页面控件灰化，不可用，默认勾选 | |
| 可见 | 控件是否可见，勾选后，填报预览页面显示控件；不勾选，填报预览页面不显示控件，默认勾选 | |
2.4 事件
事件设置界面可以为控件添加事件实现某些效果，「日期区间控件」支持的事件有初始化后、编辑后、编辑结束。如下图所示：
选择一种事件类型后，即可添加事件内容，「日期控件」支持的事件响应方式有 JavaScript 脚本、提交入库、发送邮件。如下图所示：
选择对应的事件响应方式添加即可，不同响应方式区别可参考：事件响应方式
2.5 移动端
移动端无可配置项。
3. 示例
3.1 准备模板
新建普通报表，新建数据集 ds1 ，输入如下 SQL 查询语句：
SELECT * FROM 订单
WHERE 订购日期 >= SUBSTR('${time}', 1, INSTR('${time}', ',') - 1)
AND 订购日期 <= SUBSTR('${time}', INSTR('${time}', ',') + 1, 10)
表示获取订单数据表中，订购日期在包含起始日期和结束日期的字符串参数 time 范围内的数据。如下图所示：
| 函数 | 含义 | 示例 |
|---|---|---|
| INSTR('${time}', ',') | 找到字符串逗号的位置 | 假设time：'2010-01-01,2010-06-30' 返回结果为 11 |
| SUBSTR('${time}', 1, INSTR('${time}', ',') - 1) | 截取从第1个字符到逗号前1位，即获取开始日期 | 返回结果为'2010-01-01' |
| SUBSTR('${time}', INSTR('${time}', ',') + 1, 10) | 从逗号后第1个字符开始截取10位，即获取结束日期 | 返回结果为'2010-06-30' |
3.2 设计表格
设计表格格式，将对应字段拖入到对应单元格中，如下图所示：
3.3 添加日期区间控件
编辑参数面板，点击右侧「组件设置」上方的「全部添加」，生成参数控件，点击 time 参数框，选择「日期区间控件」，如下图所示：
3.4 效果预览
保存模板，点击「分页预览」，如下图所示：
注1：不支持移动端
注2：示例数据集 ds1 有效日期区间为 2010-01-01 ~ 2010-06-23、2011-01-12 ~ 2011-06-13、1996-07-04 ~ 1996-11-08 。
4. 模板下载
点击下载模板：日期区间控件数据集参数过滤.cpt
上一篇：农历日历插件
