Element Plus 日期控件(Date Picker) 开始日期和结束日期范围限制

发布时间 2023-09-18 11:34:48作者: KizunaT

话不多说直接看效果

结束日期 >= 开始日期

image

开始日期 <= 结束日期

image

代码如下

<template>
  <el-date-picker v-model="startDate" :disabled-date="(val) => startPickerOptions" type="date" placeholder="开始日期"></el-date-picker>

  <el-date-picker v-model="endDate" :disabled-date="endPickerOptions" type="date" placeholder="结束日期"></el-date-picker>
</template>
  
<script>
export default {
  data() {
    return {
      startDate: Date.now(), // 开始日期
      endDate: '',   // 结束日期
    };
  },
  methods: {
    startPickerOptions(time) {
      if (this.endDate) {
        return time.getTime() > this.endDate
      }
    },
    endPickerOptions(time) {
      // 禁用结束日期之前的所有日期
      if (this.startDate) {
        return time.getTime() < this.startDate
      }
    },
  },
};
</script>

希望对您有所帮助!

by kizunaT