告别双日期面板！一招实现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属性只能是全局样式，如果在
