【参数界面JS实例】JS自定义日期控件高度

1. 概述
1.1 问题描述

平时使用中总有一些客户要求比较高，对控件默认显示的效果不太满足，不是按钮选择框太大，就是配色不好等等。

以日期控件为例，默认的样式如下图所示：

可能是用户浏览器太小，用户觉得选择框太大，能不能设置小一点？

1.2 实现思路

一般来说可以通过引入 CSS 文件覆盖原有样式的方法来实现。但是日期控件弹出面板这个比较特殊，这个是动态引入的 CSS 文件，点击了日期控件的下拉按钮才会加载的，所以引入  CSS 文件的方法就不能用了。我们可以等日期选择面板展现出来后再 JavaScript 调整 CSS 样式来实现。

2. 示例
2.1 操作步骤

在参数面板添加日期控件，添加初始化后 JavaScript 事件，如下图所示：

JavaScript 代码如下：

1. this.btn.bind('click',function() {
   
2.         //面板展现出来了执行
   
3.     setTimeout(function(){
   
4.         $('.fr-datepicker td').css({
   
5.             height:'10px',
   
6.             'font-size':'10px',
   
7.             padding:0
   
8.         });
   
9.         $('.fr-datepicker tr').css({
   
10.             height:'10px'
    
11.         });
    
12.     },100);   //初始化后，100ms后调用css样式
    
13. });

复制代码

注：此方法适用于填报控件。移动端不支持。

2.2 预览效果

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

3. 模板下载

模板效果在线查看请点击：JS 自定义日期控件高度.cpt

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\04-JS自定义日期控件高度.cpt

模板见附件