element UI日期选择器固定选择范围

项目中经常会使用到日期选择器，并且会对可选择的日期有要求，分享几个常用的，给大家作参考。

• 只能选择当前日期前（不包含当前日期）

<template>
  <el-date-picker
    v-model="selectedDate"
    :picker-options="pickerOptions"
    type="date"
    placeholder="选择日期"
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: null,
      pickerOptions: {
        disabledDate(time) {
          const now=8.64e7;
          return time.getTime()  > Date.now()-now;
        }
      }
    };
  }
};
</script>

• 只能选择当前日期前（包含当前日期）

<template>
  <el-date-picker
    v-model="selectedDate"
    :picker-options="pickerOptions"
    type="date"
    placeholder="选择日期"
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: null,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime()  > Date.now();
        }
      }
    };
  }
};
</script>

• 指定日期范围（例如2022年12月1日至当前日期）
• <template> <el-date-picker v-model="selectedDate" :picker-options="pickerOptions" type="date" placeholder="选择日期" ></el-date-picker></template><script>export default { data() { return { selectedDate: null, pickerOptions: { disabledDate(time) { const startDate = new Date('2022-12-01'); const endDate = new Date(); return time < startDate || time > endDate; } } }; }};</script>