当前位置: 代码网 > it编程>前端脚本>Vue.js > el-date-picker 选择日期范围只保存左侧日期面板的实现代码

el-date-picker 选择日期范围只保存左侧日期面板的实现代码

2024年07月02日 Vue.js 我要评论
需求日期筛选,但限制只能选择同一个月的数据,故此应该去掉右侧月份面板。实现主要是通过 css 样式实现:<style>/* 隐藏右边日期面板 */.el-picker-panel__con

需求

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

实现

主要是通过 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>

实现效果

到此这篇关于el-date-picker 选择日期范围只保存左侧日期面板的文章就介绍到这了,更多相关el-date-picker 选择日期范围内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网!

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com