1. 概述
2. 功能介绍
2.1 控件内容
2.1.1 内容
日期区间时间控件可设置的内容如下图所示：
各设置项的详细介绍如下表所示：
| 设置项 | 详细介绍 |
|---|---|
| 格式 | 支持选择 3 种类型，每种类型也分别支持选择多种显示样式，同时支持手动输入
|
| 绑定参数 | 值为参数名称，用于与参数绑定。默认为空，需根据实际参数进行设置 支持分别绑定「起始日期」、「结束日期」 支持已有参数的绑定，也可以直接输入新值以创建新的参数 |
| 快捷区间 | 仅在格式选为「年-月-日」时支持配置 支持下拉多选：昨日、当日、明日、最近 7 天、最近 15 天、最近 1 月、最近 1 年、月初至今、季度除至今、年初至
|
| 默认值 | 支持分别设置「起始日期」、「结束日期」，起始日期必须小于结束日期 可设置日期时间的默认值，有如下 4 种 1）自定义日期时间：默认取当天日期时间，显示值与上方格式类型保持一致 可删除后重新选择，同时支持手动输入
2）字段：可选择数据集中字段，若返回值为数组，只取数组序列中第一个值显示
3）公式：点击右侧 fx 输入公式，若返回值为数组，只取数组序列中第一个值显示
4）快捷区间：仅支持在「起始日期」中配置。 支持从上方快捷区间配置中选择一项作为默认值，选择快捷区间时结束日期灰化不可设置
|
| 返回值 | 返回值的格式，分为「日期」和「字符串」两种，一般需要跟数据库表中日期字段的类型匹配 |
| 水印 | 预览时控件内显示的浅灰色水印文字，以提示用户需要输入的信息，点击控件输入文本后消失，默认为空 支持分别设置「起始日期」、「结束日期」 |
| 日期范围 | 可设置起始日期和结束日期。起始日期必须小于结束日期 设定日期范围后，不在范围内的数据将变成灰色不可选取状态 设置项包括以下 3 种： 1）无限制：不做限制 2）自定义：默认取当天日期时间，显示值与上方格式类型保持一致。可删除后重新选择 3）公式：点击右侧 fx 输入公式，若返回值为数组，只取数组序列中第一个值显示 |
| 权限 | 设置页面初始预览时该控件是否可编辑，默认勾选可编辑 |
| 校验 | 空值校验：是否允许控件为空值，勾选后，允许控件为空值；不勾选，可设置校验提示文字，模板预览时若控件为空，则显示提示文字。默认勾选 |
2.1.2 内容样式
支持对「控件文字」设置字符样式，例如字体、字号、颜色等等。
注1：样式设置对下拉面板中的字体无效，下拉面板字符样式仅受 FVS模板样式 影响。
注2：修改字符颜色后，再设置 FVS模板样式 ，字符颜色会跟随主题变化，需重新设置。
2.2 控件交互事件
点击「交互>添加事件」，可添加 JavaScript 事件实现更多效果。日期区间控件支持「初始化后」和「编辑结束」事件。如下图所示：
点击具体的某一个事件，会弹出 JavaScript 事件设置框。如下图所示：
注：关于 FVS 支持的 JavaScript 可参考文档 FVS支持的JS接口场景 。
3. 示例
3.1 准备模板
1）点击设计器左上角「文件>新建可视化看板」。
2）新建数据库查询 ds1 ，输入如下 SQL 查询语句：
SELECT * FROM 订单 where 1=1
${if(len(starttime)=0,""," and 订购日期>='"+starttime+"'")}
${if(len(endtime)=0,""," and 订购日期<='"+endtime+"'")}
表示获取订单数据表中，订购日期在 starttime（起始时间）和 endtime（结束时间）范围内的数据。
如下图所示：
3.2 添加日期区间控件
点击组件区「控件>日期区间」，添加到页面中。
在右侧配置区，设置绑定参数：
起始日期为 starttime ，与数据集参数 starttime 相匹配。
结束日期为 endtime ，与数据集参数 endtime 相匹配。
默认值选择「自定义日期时间」：
起始日期选择 2011-05-22
结束日期选择 2011-06-22
3.3 添加折线图
1）点击组件区「图表>折线图」，添加到页面中，给折线图绑定数据如下图所示：
2）选中折线图，点击「内容>样式>坐标轴」，将 X轴 的类型设置为「时间坐标轴」。
3.4 效果预览
3.4.1 PC端
点击右上角「保存」，点击「预览」，修改起始日期或结束日期后，折线图则显示对应时间范围内的数据。效果如 1.2 节所示。
3.4.2 移动端
预览方式请参考 FVS移动端预览 ，效果如下图所示：
4. 模板下载
点击下载模板：日期区间控件.fvs
上一篇：FVS日期时间控件
