如何在Element-ui日期选择器中动态设置最小和最大日期

Question

我有两个日期选择器用于startDate和endDate.在startDate Picker中,我想在endDate之前禁用所有日期,反之亦然.如何使用elemnt-ui禁用日期.>

Answer 1

这是一个老问题,但我今天也问了同样的问题.您可以使用disabledDate选择器选项实现此目的.这是一个关于如何禁用所有未来日期的示例:

<el-date-picker
  :picker-options="datePickerOptions"
</el-date-picker>

然后在您的数据对象中:

data () {
  return {
    datePickerOptions: {
      disabledDate (date) {
        return date > new Date()
      }
    }
  }
}

Answer 2

首先，您应该为结束日期输入定义选择器选项。主要问题是在选择器选项的disabledDate方法内部使用此关键字，因此您应该将数据定义之外的方法准确地移到方法部分，因此，完整的代码应如下所示：

data () {
    return {
        task: {
            start_at: new Date(),
            end_at: new Date()
        }
        dueDatePickerOptions: {
            disabledDate: this.disabledDueDate
        }
    }
},
methods: {
    disabledDueDate (time) {
        return time.getTime() < this.task.start_at
    },
    validateEndDate () {
        if (this.task.start_at > this.task.due_at) {
            this.task.due_at = this.task.start_at
        }
    }
}

而HTML这个例子中的一部分，应该看起来像：

<el-date-picker @input="validateEndDate" v-model="task.start_at" type="date"></el-date-picker>
<el-date-picker v-model="task.end_at" :picker-options="dueDatePickerOptions" type="date"></el-date-picker>

注意： validateEndDate方法将在更改startDate之后触发，并检查endDate是否在startDate之前，然后将endDate固定为相等。