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>

实现效果

相关推荐
ssshooter2 分钟前
传参优于外部变量
前端·后端·面试
小小小小宇22 分钟前
处理耗时较长的任务笔记
前端
消失的旧时光-194332 分钟前
Flutter Scaffold 全面解析:打造页面骨架的最佳实践(附场景示例 + 踩坑分享)
前端·flutter
三门35 分钟前
开源版扣子私有化部署
前端
麦麦大数据1 小时前
F048 体育新闻推荐系统vue+flask
前端·vue.js·flask·推荐算法·体育·体育新闻
风止何安啊1 小时前
JS 对象:从 “散装” 到 “精装” 的晋级之路
前端·javascript·node.js
Bug快跑-11 小时前
Java、C# 和 C++ 并发编程的深度比较与应用场景
java·开发语言·前端
Achieve前端实验室1 小时前
【每日一面】如何解决内存泄漏
前端·javascript·面试
小肚肚肚肚肚哦1 小时前
🎮 从 NES 到现代 Web —— 像素风组件库 Pixel UI React 版本,欢迎大家一起参与这个项目
前端·vue.js·react.js
y***03171 小时前
Node.js npm 安装过程中 EBUSY 错误的分析与解决方案
前端·npm·node.js