1. 概述
1.1 版本
报表服务器版本 | APP版本 | HTML5 移动端展现插件版本 | 功能变动 |
---|---|---|---|
11.0 | V11.0 | V11.0 | - |
11.0 | V11.0.891 | V11.0.891 | 简约日历 支持自定义「年、年月」格式的日期控件 |
1.2 应用场景
移动端通过日历的方式筛选日期,之前只能通过报表块、条件属性、联动等实现,模板制作过程非常麻烦,且样式单一。
1.3 功能简介
移动端可实现通过日历的方式筛选日期,比如日报、行程等场景,易用性及体验更强,能够明显看出日期所处月份,周号等。并支持为日期控件设置控件背景、边框颜色、字符字体、图标等。
2. 功能入口
1)点击下载模板:行程管理主页-phone.frm ,在 FineReport 设计器中打开该模板。
2)选中右侧属性面板中的「组件设置>day」。
3)点击「移动端」,点击「样式模板」旁的「...」按钮,可以看到 样式模板 有四种样式:「默认」、「导航日历」、「简约日历」、「简约日期样式」,如下图所示:
3. 默认
3.1 设置
「默认」样式模板只可设置「通用属性」,详情参见:默认样式模板 。
3.2 示例
1)样式模板选择「默认」。
2)「通用属性> 属性设置」 选择「自定义」。
3)配置具体设置项,点击「确定」,如下图所示:
4)App 及 HTML5 端效果预览如下图所示:
注:可点击日期或图标打开日历面板选择具体日期。
4. 简约日历
4.1 设置
「简约日历」样式模板可设置「通用属性」和「设定」。
4.1.1 通用属性
「通用属性」的设置与「默认」样式模板相同,详情参见:默认样式模板 。
4.1.2 设定
「设定」的「按钮样式」分为「标准」和「自定义」。
1)「按钮样式」为「标准」时,不可自定义设置 按钮样式 。
2)「按钮样式」为「自定义」时,可自定义设置 按钮样式 。
具体设置项说明如下表所示:
设置项 | 说明 | |
---|---|---|
默认状态 |
| |
标题行 | 分割线颜色 | 支持自定义分割线颜色 |
按钮 | 颜色 | 支持自定义按钮颜色 |
字符 | 主字符 | 支持自定义主字符颜色 |
特殊字符 | 支持自定义特殊字符颜色 | |
字号 | 支持自定义字号,范围为12-18之间的整数,默认为14 | |
箭头 | 颜色 | 支持自定义箭头颜色 |
4.2 示例
1)样式模板选择「简约日历」。
2)「通用属性>属性设置」选择「默认」。
3)「设定」的「按钮样式」选择「自定义」,配置具体设置项,点击「确定」,如下图所示:
4)App 及 HTML5 端效果预览如下图所示:
注:可点击上方的日期或下方的箭头收起日历面板。
4.3 年月、年
App 版本及 HTML5 移动端展现插件版本 V11.0.891 版本及之后,移动端支持自定义日期控件「年月、年」格式的「简约日历」样式模板,效果如下图所示:
5. 导航日历
5.1 设置
5.1.1 通用属性
「通用属性」的设置与「默认」样式模板相同,详情参见:默认样式模板 。
5.1.2 设定
「设定」的「按钮样式」分为「标准」和「自定义」。
1)「按钮样式」为「标准」时,不可自定义设置 按钮样式 。
2)「按钮样式」为「自定义」时,可自定义设置 按钮样式 。
具体设置项说明如下表所示:
设置项 | 说明 | |
---|---|---|
默认状态 |
| |
标题行 | 标题行 | 支持设置是否显示标题行 |
分割线颜色 | 支持自定义分割线颜色 | |
按钮 | 颜色 | 支持自定义按钮颜色 |
字符 | 主字符 | 支持自定义主字符颜色 |
特殊字符 | 支持自定义特殊字符颜色 | |
字号 | 支持自定义字号,范围为12-18之间的整数,默认为14 | |
箭头 | 颜色 | 支持自定义箭头颜色 |
5.2 示例
1)样式模板选择「导航日历」。
2)「通用属性>属性设置」选择「默认」。
3)「设定」的「按钮样式」选择「自定义」,配置具体设置项,点击「确定」,如下图所示:
4)App 及 HTML5 端效果预览如下图所示:
注1:「收起状态」下,上下周切换可通过上方的「上一周」、「下一周」按钮实现,也可左右滑动下方日期来实现。
注2:可通过点击上方的日期或下方的箭头展开日历面板。
6. 简约日期样式
6.1 设置
6.1.1 通用属性
「通用属性」的设置与「默认」样式模板相同,详情参见:默认样式模板 。
6.1.2 设定
「设定」的「按钮样式」分为「标准」和「自定义」。
1)「按钮样式」为「标准」时,不可自定义设置 按钮样式 。
2)「按钮样式」为「自定义」时,可自定义设置 按钮样式 。
具体设置项说明如下表所示:
设置项 | 说明 | |
---|---|---|
标签名称 | 字符 | 支持设置字体样式、字号(范围为1-99之间的整数,默认为15)、字体颜色、加粗、倾斜 |
控件名称 | 字符 | 支持设置字体样式、字号(范围为1-99之间的整数,默认为15)、字体颜色、加粗、倾斜 |
图标 | 支持自定义图标 | |
控件区域 注:「控件区域」设置的控件样式生效优先级高于「通用属性」 | 控件背景 | 支持自定义控件背景的颜色 |
控件边框 | 支持自定义控件边框的类型 | |
边框颜色 | 支持自定义边框颜色 | |
圆角 | 支持自定义边框的圆角 | |
宽度 |
|
6.2 示例
1)选中右侧属性面板中的「组件设置>day」。
2)选择「属性」Tab 面板,设置「标签名称」为「帆软」,如下图所示:
3)选择「移动端」Tab 面板,点击「样式模板」旁的「...」按钮。
4)样式模板选择「简约日期样式」。
5)「通用属性>属性设置」选择「默认」。
6)「设定」的「按钮样式」选择「自定义」,配置具体设置项,点击「确定」,如下图所示:
7)App 及 HTML5 端效果预览如下图所示: