脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → el-date-picker 选择日期范围

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 选择日期范围内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 详解使用mpvue开发github小程序总结

    详解使用mpvue开发github小程序总结

    这篇文章主要介绍了详解使用mpvue开发github小程序总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 前端vue+express实现文件的上传下载示例

    前端vue+express实现文件的上传下载示例

    本文主要介绍了前端vue+express实现文件的上传下载示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-12-12
  • Vue OptionsAPI与CompositionAPI的区别与使用介绍

    Vue OptionsAPI与CompositionAPI的区别与使用介绍

    OptionsAPI和CompositionAPI是Vue.js框架中两种不同的组件编写方式,OptionsAPI通过对象字面量定义组件,以属性分隔不同功能,响应式数据通过data属性定义,本文给大家介绍Vue OptionsAPI与CompositionAPI的区别,感兴趣的朋友一起看看吧
    2024-10-10
  • this.$toast() 了解一下？

    this.$toast() 了解一下？

    这篇文章主要介绍了vue this.$toast()用法 ，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue3中vuex的基本使用方法实例

    Vue3中vuex的基本使用方法实例

    Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,下面这篇文章主要给大家介绍了关于Vue3中vuex的基本使用方法,需要的朋友可以参考下
    2022-04-04
  • Vue3 中的模板语法小结

    Vue3 中的模板语法小结

    Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上，这篇文章主要介绍了Vue3 中的模板语法,需要的朋友可以参考下
    2023-03-03
  • vue项目打包自动更新版本号且自动刷新缓存的方法示例

    vue项目打包自动更新版本号且自动刷新缓存的方法示例

    这篇文章主要给大家介绍了关于vue项目打包自动更新版本号且自动刷新缓存的相关资料,文中通过代码及图文介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-11-11
  • vue实现多组关键词对应高亮显示功能

    vue实现多组关键词对应高亮显示功能

    最近小编遇到这样的问题，多组关键词，这里实现了关键词的背景色与匹配值的字体颜色值相同，下面通过定义关键词匹配改变字体颜色，本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧
    2019-07-07
  • Vue项目History模式404问题解决方法

    Vue项目History模式404问题解决方法

    本文主要解决Vue项目使用History模式发布到服务器Nginx上刷新页面404问题。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • 在Vue当中同时配置多个路由文件的方法案例代码

    在Vue当中同时配置多个路由文件的方法案例代码

    这篇文章主要介绍了在Vue当中同时配置多个路由文件的方法,包含具体代码，本文分步骤结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-12-12

最新评论