当前位置: 代码网 > it编程>编程语言>Javascript > el-date-picker 限制开始时间和结束时间的代码实现

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

2024年09月08日 Javascript 我要评论
el-date-picker 限制开始时间和结束时间需求:el-date-picker 月份限制开始时间和结束时间开始时间:202307结束时间:202407代码实现vue 页面 <el-fo

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 限制时间内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网!

(0)

相关文章:

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

发表评论

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