el-date-picker限制选择范围

GuMoYu2026-01-09 12:28
el-date-picker限制选择范围

vue 复制代码
<template>
  <!-- 限制选择范围为±29天 -->
  <div>
    <el-date-picker
      v-model="timeMap"
      type="daterange"
      value-format="yyyy-MM-dd"
      range-separator=" --- "
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      clearable
      :picker-options="pickerOptions"
      @change="daterangeChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeMap: [],
      firstMinDate: 0 // 存储首次选择的日期时间戳
    };
  },
  computed: {
    pickerOptions() {
      const self = this;
      const maxDays = 29 * (24 * 60 * 60 * 1000); // 限制±29天
      return {
        disabledDate(time) {
          if (self.firstMinDate > 0) {
            return time.getTime() > self.firstMinDate + maxDays || time.getTime() < self.firstMinDate - maxDays;
          }
          return false; // 首次选择前、清空日期时不禁用任何日期
        },
        onPick({ minDate }) {
          self.firstMinDate = minDate ? new Date(minDate).getTime() : 0;
        }
      };
    }
  },

  methods: {
    daterangeChange(value) {
      if (!value) {
        this.firstMinDate = 0;
      }
    }
  }
};
</script>

<style lang="scss" scoped></style>