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

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

1.需求背景

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

1.只显示单个月份面板

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

2.DateTimePicker 现状图

2.1 日期选择器

2.2 DateTimePicker 日期时间选择器

3.日期选择器实现代码

主要是通过 css 样式实现:

javascript 复制代码
/* 隐藏右边日期面板 */
.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 日期选择器实现代码的基础上,再进行调整

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

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

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

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

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

  1. 自定义样式popper-class属性只能是全局样式,如果在
相关推荐
G等你下课10 分钟前
AJAX请求跨域问题
前端·javascript·http
阑梦清川11 分钟前
Java后端项目前端基础Vue(二)
vue.js
爱编程的喵15 分钟前
JavaScript闭包深度解析:从作用域到实战应用
前端·javascript
ITfeib16 分钟前
Flutter
开发语言·javascript·flutter
雪碧聊技术1 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
打不着的大喇叭2 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
Sun_light2 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子2 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
百锦再2 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
快起来别睡了2 小时前
Vue 3 中的组件通信与组件思想详解
vue.js