【告别双日期面板!一招实现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属性只能是全局样式,如果在
相关推荐
独立开阀者_FwtCoder10 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
慧一居士10 分钟前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js
Hilaku18 分钟前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js
星语卿18 分钟前
Js事件循环
javascript
datagear19 分钟前
如何在DataGear 5.4.1 中快速制作HTTP数据源服务端分页的数据表格看板
javascript·数据可视化
艾克马斯奎普特25 分钟前
为什么响应性语法糖最终被废弃了?尤雨溪也曾经试图让你不用写 .value
前端·vue.js·代码规范
namehu27 分钟前
“什么?视频又双叒叕不能播了!”—— 移动端视频兼容性填坑指南
javascript·html
MR_发28 分钟前
万字实现带@和表情包的输入框
vue.js·typescript
多啦C梦a29 分钟前
React Hooks 编程:`useState` 和 `useEffect`,再不懂就OUT了!
前端·javascript
yvvvy43 分钟前
# React Hooks 全面解析:从 useState 到 useEffect,掌握状态与副作用管理
javascript