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

来源链接:https://www.jb51.net/javascript/325694z6b.htm

© 版权声明
THE END
支持一下吧
点赞12 分享
评论 抢沙发
头像
请文明发言!
提交
头像

昵称

取消
昵称表情代码快捷回复

    暂无评论内容