【告别双日期面板！一招实现el-date-picker智能联动日期选择】

告别双日期面板！一招实现el-date-picker智能联动日期选择

• 1.需求背景
• [2.DateTimePicker 现状图](#2.DateTimePicker 现状图)
• 3.日期选择器实现代码
• 4.日期选择器实现效果图
• 5.日期时间选择器实现代码
• 6.日期时间选择器实现效果图

1.需求背景

在用户使用时间查询时，我们经常需要按月份筛选数据。但默认的 el-date-picker 组件在 type="daterange" 时会显示双月份面板，而我们需要：

1.只显示单个月份面板

2.强制用户只能选择同一月份内的日期范围

2.DateTimePicker 现状图

2.1 日期选择器

2.2 DateTimePicker 日期时间选择器

3.日期选择器实现代码

主要是通过 css 样式实现：

/* 隐藏右边日期面板 */
.el-picker-panel__content.el-date-range-picker__content.is-right .el-date-table,
.el-picker-panel__content.el-date-range-picker__content.is-right
.el-date-range-picker__header
div {
  display: none !important;
  height: 800px;
}
.el-picker-panel__content.el-date-range-picker__content.is-right
.el-date-range-picker__header {
  width: 60px;
  top: -331px;
  left: 230px;
}
/* 设置整体日期面板的宽度 */
.el-picker-panel.el-date-range-picker.el-popper {
  width: 322px;
}

/* 隐藏中间线段 */
.el-date-range-picker__content.is-left {
  border-right: none;
}

/* 左边日期面板宽度 */
.el-picker-panel__content {
  width: 63% !important;
}

.el-picker-panel__content.el-date-range-picker__content.is-right .el-date-range-picker__header {
  top: -281px;
}
.el-date-range-picker__content.is-left {
  height: 270px;
}

4.日期选择器实现效果图

5.日期时间选择器实现代码

再上述DateTimePicker 日期选择器实现代码的基础上，再进行调整

.el-date-range-picker__time-picker-wrap:first-child {
  display: none !important;
}
.el-date-range-picker__time-header {
  width: 62%;
}

6.日期时间选择器实现效果图

当我们在使用element组件时，会遇到需要修改组件的样式，但是样式无法覆盖原样式的情况。
用popper-class属性，给组件传递样式

 <el-date-picker
      v-model="value1"
      type="date"
      popper-class="customs-style"
      placeholder="选择日期">
    </el-date-picker>

注意： 1.具体的位移值px，根据自己页面数据调整

2. 自定义样式popper-class属性只能是全局样式，如果在