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

十一吖i2024-08-14 17:11

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

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

开始时间：202307

结束时间：202407

代码实现

vue 页面

javascript 复制代码

  <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

javascript 复制代码

<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>

效果图