el-date-picker 选择日期范围只保存左侧日期面板的实现代码
更新时间：2024年06月21日 14:44:09 作者：代码搬运媛
接到这样的需求,日期筛选,但限制只能选择同一个月的数据,故此应该去掉右侧月份面板,今天通过本文给大家分享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>实现效果
到此这篇关于el-date-picker 选择日期范围只保存左侧日期面板的文章就介绍到这了,更多相关el-date-picker 选择日期范围内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了详解Vue前端生产环境发布配置实战篇，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
下面小编就为大家分享一篇基于Vuejs的搜索匹配功能实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了Vue如何实现多页面配置以及打包方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue动态添加的路由页面刷新时失效的原因及解决方案，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下2021-02-02
平常使用Vue开发时,一个项目中多个地方需要用到的相同组件通常我们会封装为一个公共组件,所以我们可以将封装好的组件打包发布至npm,本文主要介绍了vue组件发布成npm包,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
这篇文章主要为大家详细介绍了vue+AI智能机器人回复功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
Vue预渲染：prerender-spa-plugin生成静态HTML与vue-meta-info更新meta
Vue.js中,prerender-spa-plugin和vue-meta-info插件的结合使用,提供了解决SEO问题的方案,prerender-spa-plugin通过预渲染技术生成静态HTML,而vue-meta-info则能动态管理页面元数据,本文将探讨如何使用这两个工具优化Vue.js项目的SEO表现,包括安装、配置及注意事项2024-10-10
这篇文章主要给大家介绍了关于vue3前端导出excel表格的两种实现方法,文中通过代码以及图文介绍的非常详细,对大家学习或者使用vue3具有一定的参考借鉴价值,需要的朋友可以参考下2024-11-11
订阅发布模式定义了一种一对多的依赖关系，让多个订阅者对象同时监听某一个主题对象。这篇文章主要介绍了发布订阅模式在vue中的实际运用,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了详解vue挂载到dom上会发生什么，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
最新评论