elementUI 日期组件 ＜el-date-picker type=“daterange“ ＞ 时间范围遇到的问题 tips

1.此组件默认展示两个日历框，并且两个日历框联动展示

2.若在同一日历中选择时间范围，只需将其联动解除，并隐藏右侧日历框

 （1）解除联动

         标签中添加‘unlink-panels’属性即可

（2）隐藏右侧日历  

.trbd-date-picker-daterange-popper {
		width: 300px;
		margin-left: -20px;
  .el-date-range-picker__content {
			width: 100%;
			border: 0
		}
  .el-picker-panel__body {
			min-width: 300px;
		}
	}

.el-date-range-picker__content.is-right {
		height: 0;
		display: none;
  .el-date-range-picker__header {
			top: -330px;
			left: 210px;
			width: 50px;
		}
  .el-date-range-picker__header div {
			display: none;
		}
		table {
			display: none;
		}
	}

（3）tips：此过程中会遇到一些问题

        a）问题：可能在当前页面中没有生效上诉css，加了穿透也不会生效        

              原因：检查页面是否添加 scoped，如果添加了 scoped ，很可能是他的原因导致的，但是页面中如果去掉的话，可能会对系统中其他位置的样式造成干扰，不建议直接删除；

                        由于此组件是直接渲染在 body 中的，很有可能在当前组件使用页面中，拿不到其 dom ，所以无法更改属性，即使加了穿透也不会生效。

                解决方式：可以新添加一个全局 css ，在需要的位置进行引用即可.

        b）问题：删除右侧日历后，左侧日历第一次打开正常切换，当选择一个时间区间后，再次打开会出现，切换按钮被禁用，无法切换时间

                原因：左侧日历会根据第一次选择的日期，进行重新渲染，导致第二次进入时无法点击切换

                解决方式：添加 @focus="focus" ，实质上是去除标签绑定的 disabled 属性

focus() {

      // 去掉日期选择右上角下一月被禁用

      if(document.getElementsByClassName("el-picker-panel")[0]) {

        let butten = document.getElementsByClassName("el-picker-panel")[0]

                              .getElementsByClassName("is-left")[0]

                              .getElementsByClassName("el-icon-arrow-right")[0];

       butten.classList.remove("is-disabled");

       butten.removeAttribute("disabled");

       // 去掉日期选择右上角下一年 

       let nextYear = document.getElementsByClassName("el-picker-panel")[0]

                              .getElementsByClassName("is-left")[0]

                              .getElementsByClassName("el-icon-d-arrow-right")[0];

       nextYear.classList.remove("is-disabled");

       nextYear.removeAttribute("disabled");

      }

    }