Element UI 日期选择器：限制选择日期范围 (给定日期之后)

{"title":"Element UI 日期选择器：限制选择日期范围 (给定日期之后)", "description":"本文介绍如何在 Element UI 日期选择器中设置给定日期之后可选日期范围，并提供示例代码和解释。", "keywords":"Element UI, 日期选择器, 日期范围, el-date-picker, start 属性, disabledDate, JavaScript, 代码示例", "content":"

您可以通过设置 start 属性来指定可选日期范围。具体来说，您可以设置 start 属性为给定日期的下一天。以下是一个示例：

<el-date-picker
  v-model="selectedDate"
  :start="getNextDay(date)"
  :picker-options="pickerOptions"
></el-date-picker>

data() {
  return {
    date: new Date(),
    selectedDate: null,
    pickerOptions: {
      disabledDate: (time) => {
        if (this.selectedDate) {
          return time.getTime() < this.selectedDate.getTime();
        } else {
          return false;
        }
      }
    }
  }
},
methods: {
  getNextDay(date) {
    const nextDay = new Date(date);
    nextDay.setDate(nextDay.getDate() + 1);
    return nextDay;
  }
}

在上面的示例中，我们通过 getNextDay 方法将给定日期增加一天，并将其作为 start 属性的初始值。然后，我们使用 pickerOptions 来设置 disabledDate 方法，该方法会禁用早于选定日期的日期。