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>

实现效果

相关推荐
533_2 分钟前
[element-ui] el-tree 获取指定节点的父节点
前端·vue.js·elementui
坚持学习前端日记3 分钟前
Agent AI 前端技术架构设计文档
前端·javascript·人工智能·python
RDCJM3 分钟前
Plugin ‘org.springframework.bootspring-boot-maven-plugin‘ not found(已解决)
java·前端·maven
nibabaoo7 分钟前
前端开发攻略---Vue 3 实现视频小窗播放(画中画)效果的完整示例
前端·javascript·vue小窗播放
lqj_本人10 分钟前
基于 openYuanrong 的生成式推荐缓存高可用方向验证实践
前端·vue.js·缓存
We་ct17 分钟前
React 中的双缓存 Fiber 树机制
前端·react.js·缓存·前端框架·reactjs·fiber·缓存机制
We་ct24 分钟前
React Render 与 Commit 阶段详解
前端·react.js·面试·前端框架·react·commit·render
英俊潇洒美少年25 分钟前
React Hook 钩子 useInsertionEffect、useLayoutEffect、useEffect的区别
前端·javascript·react.js
坚持学习前端日记26 分钟前
Agent AI 后端接口对接与大模型适配指南
前端·人工智能·python·ios
坚持学习前端日记30 分钟前
Agent AI 多模态交互与全场景架构设计
前端·javascript·人工智能·visual studio