日期控件

  • 文档创建者:文档助手1
  • 编辑次数:28次
  • 最近更新:Wendy123456 于 2020-07-09
  • 1. 概述

    1.1 应用场景

    报表中添加日期查询控件,可以查询指定日期区间内的报表数据。

    1.2 功能介绍

    目前日期控件有两种查询格式,分别为:

    1)日期型:用户可以在年月日的范围内定义查询日期格式。

    Snag_592ede2.png

    2)时间型:用户可以在年月日时分秒范围内定义查询日期格式。

    Snag_594b043.png

    2. 控件介绍

    2.1 操作方法

    报表设计时,进入参数面板编辑界面,将上方的日期控件拖动到参数面板中。

    Snag_5987104.png

    2.2 属性设置

    选中日期控件后,可在右下方设置日期控件的属性。

    Snag_5bb108a.png

    每个属性介绍如下:

    • 控件名称:通常与参数结合使用,通过控件名可以获得该控件,从而获得控件值传递给对应参数;或者通过控件名获得控件后通过 JS 设置控件的属性。

    注:若模板中参数名称和控件名称相同,点击日期控件选择日期后,会立即传递参数,实现联动效果。

    • 可用:勾选后,模板中正常使用该控件;不勾选,控件灰化,不可点击选择日期。

    • 可见:勾选后,控件可见;不勾选,控件不可见。

    • 标签名称:标签名称的作用就是用来弥补参数界面中标签控件不支持的问题。

    • 控件值:设定日期控件的默认显示值,有日期、公式、字段这三种格式。

    • 格式:日期控件的查询格式,功能介绍中有提及。

    • 起始日期:查询时输入的时间不能小于起始日期。

    • 结束日期:查询时输入的时间不能大于结束日期。

    • 水印:自定义水印内容。

    • 字体大小:日期字体大小

    • 返回值类型:需要跟数据库表中日期字段的类型匹配,有日期字符串这两种。

    • 校验:勾选允许为空,则查询时日期控件内容可以为空。勾选允许直接编辑,则查询时允许手动输入日期。

    注1:起始日期和结束日期可以使用公式传递参数和单元格。

    注2:设定了起始日期和结束日期后,不在范围内的数据将变成灰色不可选取状态。

    3. 示例

    下面使用日期控件实现日期区间查询效果。

    3.1 数据准备

    新建数据集 ds1,输入如下 SQL 查询语句:

    SELECT * FROM 订单 where 1=1 

     ${if(len(starttime)=0,""," and 订购日期>='"+starttime+"'")}

     ${if(len(endtime)=0,""," and 订购日期<='"+endtime+"'")}

    查询语句中新建了两个数据集参数:starttime 和 endtime,分别作为查询区间的头部参数和尾部参数。

    Snag_5a97d07.png

    3.2 报表设计

    1)如下图设计报表样式,订购日期格式改为日期型,应付金额格式改为数字保留小数点后两位。

    Snag_5aec8dd.png

    2)进入参数面板编辑界面,将参数 starttime 和 endtime 添加到参数面板,绑定日期控件。

    Snag_5b72639.png

    3)设置日期区间开始日期的属性,选中 starttime 参数对应的日期控件,属性设置如下图所示:

    控件值插入公式:monthdelta($endtime,-1),表示结束日期显示值后推一个月最作为开始日期的默认显示值。

    结束日期插入公式:$endtime,表示选取日期区间开始日期时不能超过日期区间结束日期。

    Snag_f876b75.png

    4)设置日期区间结束日期的属性,选中 endtime 参数对应的日期控件,属性设置如下图所示:

    控件值插入公式:today(),表示以今天作为结束日期的默认显示值。

    Snag_59b3218.png

    3.3 效果预览

    1)PC 端:

    保存报表,点击分页预览,效果如下图所示:

    FF75B3A0-4CB4-458F-96CD-7E317E03A6F9.GIF

    2)移动端

    App 及 HTML5 端效果如下图所示:

    84AF6F09-9FF3-42A6-8391-FB843907998F.GIF

    4. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\日期控件.cpt

    点击下载模板:日期控件.cpt

    5. 注意事项

    5.1 日期控件星期切换

    在 Web 端使用日期控件的时候,由于国内外对于一个星期的周期的差异化认识,会带来一些误操作,国外普遍认为一个星期从周日开始,国内普遍认为一个星期从周一开始,为了迎合国内外对于日期控件的习惯需求,FineReport 提供了日期控件星期切换的功能,在 Web 端选择日期控件的时候,点击周一即可将周一排在一个星期的第一天,点击周日即可将周日排在一个星期的第一天,如下图所示:

    5.2 选择日期后不立即生效

    问题描述:

    点击下载示例模板:test.frm

    点击模板中的日期控件,选择日期后立即传递参数,实现联动效果,但部分用户希望不立即传递参数。如下图所示:

    1593680799821807.gif

    解决方案:

    注:该解决方案不适用移动端。

    增加一个日期控件,用来中转。

    1)打开示例模板 test.frm ,添加日期控件,为其添加编辑结束事件。如下图所示:

    16.png

    JavaScript 代码如下所示:

    var dateWidget=this.options.form.getWidgetByName("date");
    dateWidget.setValue(this.getValue(),false)
    dateWidget.fireEvent(FR.Events.AFTEREDIT);

    2)选中date控件,取消勾选可见按钮。如下图所示:

    17.png

    3)点击表单预览,如下图所示:

    1593682341536922.gif

    4)已完成模板下载请点击:test1.frm

    5.3 移动端不支持直接编辑

    勾选了允许直接编辑,移动端预览时不支持直接编辑日期控件,如下图所示:

    Snag_4303af39.png

    附件列表


    主题: 参数应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!