历史版本20 :[通用]日期移动端日历样式 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 版本

Finereport 版本APP
HTML5 移动端展现插件功能变动
11.0
V11.0V11.0-
V11.0.891V11.0.891简约日历样式支持自定义「年、年月」格式的日期控件

1.2 应用场景

移动端通过日历的方式筛选日期,之前只能通过报表块、条件属性、联动等实现,模板制作过程非常麻烦,且样式单一。

1.3 功能简介

移动端可实现通过日历的方式筛选日期,比如日报、行程等场景,易用性及体验更强,能够明显看出日期所处月份,周号等。并支持为日期控件设置控件背景、边框颜色、字符字体、图标等。

1.4 注意事项

1)移动端日历样式不支持参数面板。

2)移动端日历样式复用「日期控件」,只能在决策报表的 body 界面使用。

3)移动端日历样式模板除了「默认」模式,其他无法触发 JS 事件。

2. 功能介绍编辑

在 FineReport 设计器中,点击「文件>新建决策报表」,在控件面板中拖动「日期控件」到模板中。

在右侧属性面板「控件设置」中,选中「dateEditor0」,点击「移动端」,可对「样式模板」进行选择和设置。如下图所示:

样式模板中有四种样式,分别为:「默认」,「导航日历」,「简约日历」,「简约日期样式」。用户可自定义选择日历样式。

2021-10-25_15-50-04.png

通用属性:设置日期控件背景、边框颜色、字符字体、图标等。

3. 示例编辑

3.1 模板准备

1)点击下载模板:行程管理主页-phone.frm

2)在 FineReport 设计器中打开该模板,点击右侧属性面板中的「控件设置>day>移动端」,可在「样式模板」右侧选择日历样式。如下图所示:

2021-10-25_18-32-20.png

3.2 默认

在样式模板中选择「默认」,用户可自定义通用属性。移动端效果(以 APP 效果为例)如下图所示:

2021-10-25_23-10-12.png

3.3 导航日历

在样式模板中选择「导航日历」,设置如下图所示:

2021-10-25_23-20-15.png

移动端效果(以 APP 效果为例)效果如下图所示:

注:选择完日期后,不会自动收起面板。

1579093273592206.png

「导航日历」各设置项说明如下表所示:

属性备注
属性设置
组件选项包括「默认」、「自定义」,自定义可设置背景、边框、图标、字体。
组件背景
设置组件背景色
边框线型
设置边框线型
边框颜色
设置边框颜色
边框圆角
设置边框圆角程度
图标颜色
设置日期控件图标颜色
字体
设置日期控件字体样式
按钮样式选项包括「标准」和「自定义」,默认为自定义
默认状态选项包括「收起」和「展开」,默认为收起
标题行默认勾选
分割线颜色可自定义颜色;若取消勾选「标题行」,「分割线颜色」不可设置
按钮可自定义颜色
字符可为「主字符」和「特殊字符」选择颜色,字号默认为 14
箭头可自定义颜色

注:「收起状态」下,上下周切换可通过左右滑动下方日期来实现。

3.4 简约日历

在样式模板中选择「简约日历」,设置如下图所示:

2021-10-25_23-39-42.png

移动端效果(以 APP 效果为例)如下图所示:

注:可点击中间的「日期」展开日历面板。

1579093687206728.png

「简约日历」各设置项说明如下表所示:

属性备注
属性设置
组件选项包括「默认」、「自定义」,自定义可设置背景、边框、图标、字体。
组件背景
设置组件背景色
边框线型
设置边框线型
边框颜色
设置边框颜色
边框圆角
设置边框圆角程度
图标颜色
设置日期控件图标颜色
字体
设置日期控件字体样式
按钮样式选项包括「标准」和「自定义」,默认为自定义
默认状态选项包括「收起」和「展开」,默认为收起
分割线颜色可对「分割线」自定义颜色
按钮可自定义颜色
字符
可为「主字符」和「特殊字符」选择颜色,字号默认为 14
箭头可自定义颜色

3.5 简约日期样式

「简约日期样式」支持为日期控件设置控件背景、边框颜色、字符字体、图标等。

模板下载:行程管理主页-phone(1).frm

1)为了方便效果演示,打开模板后,在「控件>day>属性」下,设置「标签名称」。

2021-10-26_10-53-30.png

2)进入「移动端」tab页,点击「样式模板」设置日历样式。

2021-10-26_11-11-09.png

3)各设置项如下图所示:

2021-10-26_10-59-12.png

4)移动端效果如下图所示:

Screenshot_20211026_110704_com.tencent.mm(1).jpg

「简约日历样式」各设置项说明如下:

注:「控件区域」设置的控件样式生效优先级高于「通用属性」。

属性
备注
属性设置
组件选项包括「默认」、「自定义」,自定义可设置背景、边框、图标、字体。
控件样式
选项包括「标准」和「自定义」,默认为「自定义」
标签名称
可设置标签名称的字符样式
控件值
可设置控件值的字符样式
图标
可上传自定义图标
控件背景
设置控件背景色
控件边框
设置控件边框样式
边框颜色
设置控件边框颜色
圆角
设置控件圆角
宽度
选项包括「横向撑满」和「自定义」,默认为横向撑满;选择自定义时,显示数字控件

V11.0.891 版本及之后,移动端支持自定义日期控件「年月、年」格式的简约日历样式。效果如下图所示:

2024-01-29_17-35-07.png