Element-UI Plus el-date-picker 限制选择日期范围：禁止选择今天之前的日期

<template>
  <div>
    <el-date-picker
      type='daterange'
      :disabled-date='disabledDate'
      :start-placeholder='startPlaceholder'
      :end-placeholder='endPlaceholder'
      v-model='dateRange'
      @change='handleChange'
    ></el-date-picker>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dateRange: null,
      disabledStartDate: null,
      disabledEndDate: null,
      startPlaceholder: '开始日期',
      endPlaceholder: '结束日期'
    }
  },
  methods: {
    handleStartDateChange(date) {
      this.disabledStartDate = date
    },
    handleEndDateChange(date) {
      this.disabledEndDate = date
    },
    handleChange(val) {
      this.disabledStartDate = val[0]
      this.disabledEndDate = val[1]
    },
    disabledDate(date) {
      return (
        this.disabledStartDate &&
        date < this.disabledStartDate ||
        this.disabledEndDate &&
        date > this.disabledEndDate
      )
    }
  }
}
</script>
<p>通过设置 el-date-picker 的 disabledDate 属性，您可以限制用户选择今天之前的日期范围。</p>
<p>具体实现步骤如下：</p>
<ol>
<li>
<p>在 el-date-picker 组件中设置 type='daterange'，同时设置 startPlaceholder 和 endPlaceholder 属性为起始日期和结束日期的提示文本。</p>
</li>
<li>
<p>在 data 中定义 disabledStartDate 和 disabledEndDate 两个变量，初始值为 null。</p>
</li>
<li>
<p>在 methods 中定义 handleStartDateChange 和 handleEndDateChange 两个方法，用于更新 disabledStartDate 和 disabledEndDate 的值。</p>
</li>
<li>
<p>在 disabledDate 属性中判断当前日期是否在 disabledStartDate 和 disabledEndDate 之间，如果是，则禁止选择该日期。</p>
</li>
</ol>
<p>在上述代码中，handleChange 方法用于更新 disabledStartDate 和 disabledEndDate 的值，disabledDate 方法用于判断当前日期是否在 disabledStartDate 和 disabledEndDate 之间，如果是，则禁止选择该日期。handleStartDateChange 和 handleEndDateChange 方法用于更新 disabledStartDate 和 disabledEndDate 的值。</p>
<p>希望这份代码示例能帮助您轻松实现 Element-UI Plus el-date-picker 组件的日期范围选择限制功能。</p>