el-date-picker 限制开始时间和结束时间的代码实现

 更新时间:2024年08月10日 14:21:23   作者:十一吖i  
在Vue.js中使用Element UI库的el-date-picker组件时,可以通过设置picker-options来限制开始时间和结束时间的选择范围,下面通过例子介绍el-date-picker 限制开始时间和结束时间的实现,感兴趣的朋友一起看看吧

el-date-picker 限制开始时间和结束时间

需求:el-date-picker 月份限制开始时间和结束时间
开始时间:202307
结束时间:202407

代码实现

vue 页面

  <el-form-item label="月份" prop="monthList">
          <el-date-picker v-model="allForm.monthList" type="monthrange" range-separator="至" start-placeholder="开始月份"
            end-placeholder="结束月份" value-format="yyyy-MM" :picker-options="pickerOptions">
          </el-date-picker>
   </el-form-item>

script

<script>
export default {
 data() {
    return {
      allForm: {},
      allRules: {
        monthList: [
          { required: true, message: "日期不能为空", trigger: "blur" }
        ]
      },
      pickerOptions: {
        disabledDate(time) {
          const now = new Date()
          const year = now.getFullYear()
          const month = now.getMonth()
          // 去年当前月份的前一个月
          const startYear = year - 1
          const startMonth = month === 0 ? 11 : month - 1
          const startDate = new Date(startYear, startMonth, 1)
          // 当前月份的前一月
          const endYear = year
          const endMonth = month === 0 ? 11 : month - 1
          const endDate = new Date(endYear, endMonth, 1)
          return (
            time.getTime() < startDate.getTime() || time.getTime() > endDate.getTime()
          )
        }
      }
    }
  }
}
</script>

效果图

在这里插入图片描述

到此这篇关于el-date-picker 限制开始时间和结束时间的文章就介绍到这了,更多相关el-date-picker 限制时间内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • TypeScript安装与使用的详细教程

    TypeScript安装与使用的详细教程

    TypeScript是JavaScript的超集,扩展了JavaScript的语法,因此现有的JavaScript代码可与TypeScript一起工作无需任何修改,TypeScript通过类型注解提供编译时的静态类型检查,下面这篇文章主要给大家介绍了关于TypeScript安装与使用的详细教程,需要的朋友可以参考下
    2023-01-01
  • 使用正则表达式的格式化与高亮显示json字符串

    使用正则表达式的格式化与高亮显示json字符串

    这篇文章主要介绍了使用正则表达式的格式化与高亮显示json字符串的方法,非常的简单实用,需要的朋友可以参考下
    2014-12-12
  • Bootstrap Table 删除和批量删除

    Bootstrap Table 删除和批量删除

    这篇文章主要介绍了Bootstrap Table 删除和批量删除的相关资料,需要的朋友可以参考下
    2017-09-09
  • Ionic项目中Native Camera的使用方法

    Ionic项目中Native Camera的使用方法

    Ionic项目中如何使用Native Camera?这篇文章主要介绍了Ionic项目中Native Camera的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • JS分别利用分页加载和懒加载预览PDF

    JS分别利用分页加载和懒加载预览PDF

    在开发过程中,我们经常会遇到预览PDF的需求,这篇文章主要为大家详细介绍了JS如何利用分页加载和懒加载预览PDF,希望对大家有所帮助
    2024-01-01
  • JavaScript判断是否是微信浏览器

    JavaScript判断是否是微信浏览器

    通过判断UA中是否有关键字micromessenger,有的话则是微信内置浏览器。下面小编给大家分享实现代码,代码简单易懂,需要的朋友可以参考下
    2016-06-06
  • 深入剖析JavaScript中Geolocation API的使用

    深入剖析JavaScript中Geolocation API的使用

    这篇文章主要来和大家一起深入探讨 JavaScript 的 Geolocation API,看看它的强大之处以及如何在你的项目中应用它,感兴趣的可以了解下
    2024-03-03
  • JS简单的图片放大缩小的两种方法

    JS简单的图片放大缩小的两种方法

    这篇文章介绍了JS简单的图片放大缩小的两种方法,有需要的朋友可以参考一下
    2013-11-11
  • js 计数排序的实现示例(升级版)

    js 计数排序的实现示例(升级版)

    这篇文章主要介绍了js 计数排序的实现示例(升级版),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • 利用JavaScript实现创建虚拟键盘的示例代码

    利用JavaScript实现创建虚拟键盘的示例代码

    这篇文章主要为大家详细介绍了如何利用JavaScript实现创建虚拟键盘,文中的示例代码讲解详细,对我们学习JavaScript有一定帮助,需要的可以参考一下
    2022-09-09

最新评论