反馈已提交

网络繁忙

[HTML5]JS控制日期控件可查询天数

  • 文档创建者:橙子超人
  • 历史版本:21
  • 最近更新:Carly 于 2023-07-21
  • 1. 概述

    1.1 版本

    报表服务器HTML5 移动端展现插件变更
    11.0V11.0-

    1.2 应用场景

    用于 H5 端预览报表时,控制日期可查询的天数。如下图所示:

    1574408037619833.gif

    1.3 功能介绍

    • H5 端预览报表时,开始时间与结束时间之间不得大于一个月

    • 并且开始时间选择后结束时间自动往后推一个月,超过一个月会有提示信息。

    注:本文的开始时间和结束时间跟 日期控件查询天数控制 中是不同的,此处开始时间>结束时间,这点需要注意。

    2. 示例

    2.1 数据准备

    1)新建一张决策报表,在菜单栏「模板>移动端属性」中将其设置为「移动端模板」。

    2)新建数据集 ds1,输入数据库查询语句:

    SELECT * FROM 订单 where 1=1 
    ${if(len(start_time)=0,""," and 订购日期<='"+start_time+"'")}
    ${if(len(end_time)=0,""," and 订购日期>='"+end_time+"'")}

    2022-04-10_21-08-10.jpg

    2.2 设计参数面板

    参数面板拖入决策报表设计主体,并添加两个日期控件

    如下图所示:

    控件属性设置控件名称标签名称
    校验>错误提示
    左侧控件start_time开始时间:取消勾选「允许为空」,输入「请选择开始时间
    右侧控件end_time结束时间:取消勾选「允许为空」,输入「请选择结束时间

    2.png

    2.2.1 start_time参数控件设计

    1)左边「start_time」参数控件的「控件值」插入公式:monthdelta($end_time,1)

    如下图所示:

    2022-04-10_21-44-16.jpg

    2)「start_time」参数控件添加编辑结束事件。如下图所示:

    2022-04-10_21-51-09.jpg

    var start = this.options.form.getWidgetByName("start_time").getValue(); 
    var end = this.options.form.getWidgetByName("end_time");  
    var day2 = new Date();day2.setTime(day2.getTime());
    var s2 = day2.getFullYear()+"-" + (day2.getMonth()+1) + "-" + day2.getDate();
    var s1 = start.substring(5,7);
    var s3 = s2.substring(5,7);
    var yy = start.substring(0,4);
    var mm = start.substr(5,2);
    var dd = new Date(yy,mm,0).getDate();
    var day3 = start.substring(0,7);
    var day4 = day3+ '-' +dd 
    if(s1==s3){
    end.setValue(s2); 
    }else{  
    end.setValue(day4); 
    }

    2.2.2 end_time参数控件设计

    1)右边「 end_time 」参数控件的控件值选择固定日期:2010/04/16

    2022-04-10_22-07-13.jpg

    2)「end_time」参数控件添加编辑结束事件。如下图所示:

    2022-04-10_22-13-12.jpg

    var start = this.options.form.getWidgetByName("start_time").getValue();  
    var end = this.options.form.getWidgetByName("end_time").getValue();  
    var endtimes = this.options.form.getWidgetByName("end_time");
    var day3 = start.substring(0,7);
    var yy = start.substring(0,4);
    var startmm = start.substr(5,2);
    var endmm = end.substr(5,2);
    var dd = new Date(yy,startmm,0).getDate();
    var day4 = day3+ '-' +dd
    var day2 = new Date();
    day2.setTime(day2.getTime());
    var s2 = day2.getFullYear()+"-" + (day2.getMonth()+1) + "-" + day2.getDate();
    var s2mm = (day2.getMonth()+1);
    FR.Msg.alert = alert;
    function alert(data, callback) { //回调函数
    var alert_bg = document.createElement('div');
    alert_box = document.createElement('div'),
    alert_text = document.createElement('div'),
    alert_btn = document.createElement('div'),
    textNode = document.createTextNode(data ? data : ''),
    btnText = document.createTextNode('确 定');
    // 控制样式
    css(alert_bg, {
                'position': 'fixed',
                'top': '0',
                'left': '0',
                'right': '0',
                'bottom': '0',
                'background-color': 'rgba(0, 0, 0, 0.1)',
                'z-index': '999999999'
            });
    css(alert_box, {
                'width': '270px',
                'max-width': '90%',
                'font-size': '16px',
                'text-align': 'center',
                'background-color': '#fff',
                'border-radius': '15px',
                'position': 'absolute',
                'top': '50%',
                'left': '50%',
                'transform': 'translate(-50%, -50%)'
            });
    css(alert_text, {
                'padding': '10px 15px',
                'border-bottom': '1px solid #ddd'
            });
    css(alert_btn, {
                'padding': '10px 0',
                'color': '#007aff',
                'font-weight': '600',
                'cursor': 'pointer'
            });
            // 内部结构套入
            alert_text.appendChild(textNode);
            alert_btn.appendChild(btnText);
            alert_box.appendChild(alert_text);
            alert_box.appendChild(alert_btn);
            alert_bg.appendChild(alert_box);
            // 整体显示到页面内
            document.getElementsByTagName('body')[0].appendChild(alert_bg);
            // 确定绑定点击事件删除标签
            alert_btn.onclick = function() {
                alert_bg.parentNode.removeChild(alert_bg);
                if (typeof callback === 'function') {
                    callback(); //回调
                }
            }
        }
        function css(targetObj, cssObj) {
            var str = targetObj.getAttribute("style") ? targetObj.getAttribute('style') : '';
            for (var i in cssObj) {
                str += i + ':' + cssObj[i] + ';';
            }
            targetObj.style.cssText = str;
        }
    var starttime = this.options.form.getWidgetByName("start_time").getValue();  
    var time = starttime.substring(1,4);
    var Year = new Date().getFullYear(), s = 0, d;
                    for (var i = 1; i < 13; i++) {
                        d = new Date(time, i, 0);
                        s += d.getDate();
                    };
    if(end > s2 || endmm != startmm  && s2mm == startmm) {
      if(end > s2 && endmm == startmm){
       alert("结束时间不能超过今天。"); 
      endtimes.setValue(s2);
      };
        if(s2mm ==startmm && endmm != startmm){
    alert("不支持跨月查询,请重新查询。"); 
    endtimes.setValue(s2);
    };
    };
     if(endmm != startmm && startmm != s2mm){
       alert("不支持跨月查询,请重新查询。"); 
      endtimes.setValue(day4);
     }

    2.3 设计报表主体

    1)决策报表拖入「报表块」,设计表格内容。如下图所示:

      7.png

    2)最终报表样式如下图所示:

    8.png

    2.4 效果预览

    详情参见本文 1.1 节。

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\FreeReport\H5端日期控件查询天数控制.frm

    点击下载模板:H5端日期控件查询天数控制.frm

    附件列表


    主题: 移动端应用
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持