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>

实现效果

相关推荐
hoiii1876 分钟前
MATLAB中主成分分析(PCA)与相关性分析的实现
前端·人工智能·matlab
大波V526 分钟前
用 nvm 彻底重装 Node 12.22.12(确保干净)
前端
和和和41 分钟前
React Scheduler为何采用MessageChannel调度?
前端·javascript
Ric97042 分钟前
Mac上Git不识别文件名大小写修改?一招搞定!
前端
momo0611744 分钟前
用一篇文章带你手写Vue中的reactive响应式
javascript·vue.js
和和和1 小时前
前端应该知道的浏览器知识
前端·javascript
狗哥哥1 小时前
前端基础数据中心:从混乱到统一的架构演进
前端·vue.js·架构
树深遇鹿1 小时前
数据字典技术方案实战
前端·javascript·架构
大布布将军1 小时前
一种名为“Webpack 配置工程师”的已故职业—— Vite 与“零配置”的快乐
前端·javascript·学习·程序人生·webpack·前端框架·学习方法
JosieBook1 小时前
【Vue】02 Vue技术——搭建 Vue 开发框架:在VS Code中创建一个Vue项目
前端·javascript·vue.js