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

告别双日期面板！一招实现el-date-picker智能联动日期选择 1.需求背景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属性只能是全局样式，如果在