el-date-picker 选择日期范围只保存左侧日期面板

需求

日期筛选,但限制只能选择同一个月的数据,故此应该去掉右侧月份面板。

实现

主要是通过 css 样式实现:

复制代码
<style>
/* 隐藏右边日期面板 */
.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;
}
.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;
}
</style>

实现效果

相关推荐
HIT_Weston14 小时前
44、【Ubuntu】【Gitlab】拉出内网 Web 服务:http.server 分析(一)
前端·ubuntu·gitlab
华仔啊14 小时前
Vue3 如何实现图片懒加载?其实一个 Intersection Observer 就搞定了
前端·vue.js
JamesGosling66615 小时前
深入理解内容安全策略(CSP):原理、作用与实践指南
前端·浏览器
不要想太多15 小时前
前端进阶系列之《浏览器渲染原理》
前端
七喜小伙儿15 小时前
第2节:趣谈FreeRTOS--打工人的日常
前端
我叫张小白。15 小时前
Vue3 响应式数据:让数据拥有“生命力“
前端·javascript·vue.js·vue3
laocooon52385788615 小时前
vue3 本文实现了一个Vue3折叠面板组件
开发语言·前端·javascript
IT_陈寒16 小时前
React 18并发渲染实战:5个核心API让你的应用性能飙升50%
前端·人工智能·后端
科普瑞传感仪器16 小时前
从轴孔装配到屏幕贴合:六维力感知的机器人柔性对位应用详解
前端·javascript·数据库·人工智能·机器人·自动化·无人机
n***F87516 小时前
SpringMVC 请求参数接收
前端·javascript·算法