bootstrap中daterangepicker组件的使用(三)

亦凉 2022-04-22 14:42 227阅读 0赞

#        bootstrap中daterangepicker组件的使用(二)我们说的是在demo中如何使用daterangepicker,接下来我将demo迁到我的项目中,大体上没有问题,只是遇到了两个关于样式的问题,下面我将具体遇到的情况在这里记录一下. #

一,首先我将demo迁到我的代码中,我直接贴一下效果图吧.

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXlpbmcxODAyMDI4OTE1_size_16_color_FFFFFF_t_70][]

如上图所示,点击上一周期,会弹出我们的日期组件,相应的功能都可以实现,但是遇到两个问题

1.第一个,因为在这个页面我引入了bootstrap.css 然后这个样式导致这个页面原先已经写好的样式发生了变化,

![20181126180706291.png][]

我解了半天,因为时间不允许我再在这里逗留,所以求助了公司的一个前端技术大牛帮我看,只见他打开浏览器F12,看了看出问题的元素,发现bootstrap.css会把整个元素的 box-sizing 属性改为 :border-box 默认是content-box ,我把bootstrap.css 的 这一块代码注释掉,即 后面这个:

/*下面这个注释掉,是因为 bootstrap 的盒子模型变了 导致事件分析页面的选择应用的下拉框的样式变了*/
    /** {
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }
    *:before,
    *:after {
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }*/

注释掉之后,发现样式修改的元素的 box-sizing 属性 变回了 content-box ,然后样式就回来了,我引用的daterangepicker 组件样式也没有发生变化,开心,解决了一个bug.

接下来我来看看 css 样式中的 box-sizing 属性(下面是菜鸟教程中的知识)

box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

<table> 
 <tbody> 
  <tr> 
   <th>默认值:</th> 
   <td>content-box</td> 
  </tr> 
  <tr> 
   <th>继承:</th> 
   <td>no</td> 
  </tr> 
  <tr> 
   <th>版本:</th> 
   <td>CSS3</td> 
  </tr> 
  <tr> 
   <th>JavaScript 语法:</th> 
   <td><em>object</em>.style.boxSizing="border-box"</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
  <tr> 
   <td>content-box</td> 
   <td>这是CSS2.1指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外</td> 
  </tr> 
  <tr> 
   <td>border-box</td> 
   <td>指定宽度和高度（最小/最大属性）确定元素边框box。也就是说，对元素指定宽度和高度包括padding和border的指定。内容的宽度和高度减去各自双方该边框和填充的宽度从指定的"宽度"和"高度"属性计算</td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>指定box-sizing属性的值，应该从父元素继承</td> 
  </tr> 
 </tbody> 
</table>

也就是说bootstrap 将 box-sizing 属性变了, 如果你的样式发生变化,要么修改bootstrap.css 要么将你的css修改了.

将 box-sizing 的属性变为 content-box后,样式恢复:

![20181126181554556.png][]

接下来我们来说第二个问题:

我引入的bootstrap和daterangepicker组件都是在这个单一页面引入的,但是我点击其他页面时,会有一个bug,如图:

先点\[事件分析\]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXlpbmcxODAyMDI4OTE1_size_16_color_FFFFFF_t_70 1][]

再点\[崩溃\]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXlpbmcxODAyMDI4OTE1_size_16_color_FFFFFF_t_70 2][]

隐隐约约是不是能看到菜单栏上面有一些别的东西,

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXlpbmcxODAyMDI4OTE1_size_16_color_FFFFFF_t_70 3][]

打开F12 发现,页面上浮现出来的东西,就是daterangepicker 组件中的东西,为什么会浮现出来呢,因为我们是web项目,整个页面时一个index.jsp,上面的导航栏和下面的菜单栏,还有右下角的很大的内容区域,共同组成了index.jsp,我虽然只在事件分析.jsp中引入了daterangepicker组件,但是他其实在index.jsp中,后来我找到daterangepicker.js的源码中,拼接日期组件的html的部分,在最外层的div上默认设置为display:none,也就是说页面初始化的时候将他设置为不可见,后面点击上一周期弹出日期控件,然后点击确定,日期控件消失,再跳转到崩溃页面,这个bug就消失了,也就是下面:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXlpbmcxODAyMDI4OTE1_size_16_color_FFFFFF_t_70 4][]

具体的代码见下面:

options = $.extend(this.element.data(), options);
    
            //html template for the picker UI
            if (typeof options.template !== 'string' && !(options.template instanceof $))
                //下面div 一开始加上样式 display: none 是为了解决 从事件分析页面跳转到别的页面 左侧会有一个确定和取消按钮
                options.template = '<div class="daterangepicker dropdown-menu" style="display: none;">' +
                    '<div class="calendar left">' +
                    '<div class="daterangepicker_input">' +
                    '<input class="input-mini" type="text" name="daterangepicker_start" value="" style="display: none"/>' +
                    '<i class="fa fa-calendar glyphicon glyphicon-calendar" style="display: none"></i>' +
                    '<div class="calendar-time">' +
                    '<div></div>' +
                    '<i class="fa fa-clock-o glyphicon glyphicon-time"></i>' +
                    '</div>' +
                    '</div>' +
                    '<div class="calendar-table"></div>' +
                    '</div>' +
                    '<div class="calendar right">' +
                    '<div class="daterangepicker_input">' +
                    '<input class="input-mini" type="text" name="daterangepicker_end" value="" style="display: none"/>' +
                    '<i class="fa fa-calendar glyphicon glyphicon-calendar" style="display: none"></i>' +
                    '<div class="calendar-time">' +
                    '<div></div>' +
                    '<i class="fa fa-clock-o glyphicon glyphicon-time"></i>' +
                    '</div>' +
                    '</div>' +
                    '<div class="calendar-table"></div>' +
                    '</div>' +
                    '<div class="ranges">' +
                    '<div class="" style="height: 230px; width: 100px;">' +
                    '</div>' +
                    '<div class="range_inputs" style="vertical-align: bottom">' +
                    '<button class="applyBtn" disabled="disabled" type="button"></button> ' +
                    '<button class="cancelBtn" type="button"></button>' +
                    '</div>' +
                    '</div>' +
                    '</div>';
    
            this.parentEl = (options.parentEl && $(options.parentEl).length) ? $(options.parentEl) : $(this.parentEl);
            this.container = $(options.template).appendTo(this.parentEl);

这样我的两个bug都解决了.

这里记录一下,以便日后复习.

不积跬步,无以至千里

不积小流,无以成江海

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXlpbmcxODAyMDI4OTE1_size_16_color_FFFFFF_t_70]: /images/20220414/734f213cade746d78f50caa712d10937.png
[20181126180706291.png]: /images/20220414/4b444ebc5e334be79773e306052dfe3d.png
[20181126181554556.png]: /images/20220414/a4973cc185d24f329e2a1a00d6608d69.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXlpbmcxODAyMDI4OTE1_size_16_color_FFFFFF_t_70 1]: /images/20220414/02172e0d42144a019c9a6419cc2b9ddb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXlpbmcxODAyMDI4OTE1_size_16_color_FFFFFF_t_70 2]: /images/20220414/343751023c4c4608ad0e8016661dba2e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXlpbmcxODAyMDI4OTE1_size_16_color_FFFFFF_t_70 3]: /images/20220414/16cb5ef0eaae44e5bd54abdd3401bcb2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXlpbmcxODAyMDI4OTE1_size_16_color_FFFFFF_t_70 4]: /images/20220414/5cfa134d4572480c991dda7c8378ab43.png