[通用]日期移动端日历样式

1.1 版本

1.2 应用场景

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

1.3 功能简介

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

1.4 注意事项

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

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

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

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

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

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

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

3.1 模板准备

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

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

3.2 默认

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

3.3 导航日历

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

移动端效果（以 APP 效果为例）效果如下图所示：

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

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

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

3.4 简约日历

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

移动端效果（以 APP 效果为例）如下图所示：

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

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

3.5 简约日期样式

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

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

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

3）各设置项如下图所示：

4）移动端效果如下图所示：

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

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