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

Question

我有 2 个用于 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 方法中使用this关键字，因此您应该将数据定义之外的方法完全移动到方法部分所以，完整的代码应该如下所示：

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>

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

Answer 3

如果你想介于两者之间，你可以试试：

datePickerOptions: {
  disabledDate: this.disabledDueDate
}

和你的方法：

methods: {
  disabledDueDate(date) {  // format Date!
    return !(date >= this.start && date <= this.end)
  },
}

Answer 4

我通过将选择器选项放在计算属性中解决了这个问题，并使用moment.js库检查日期是否在两个日期之间：

computed: {
  inBetweenDatesPickerOptions() {
    return {
      disabledDate: (time) => {
        return !moment(time.getTime()).isBetween(this.form.start_date, this.form.end_date);
      }
    }
  }
}

在标记中，您可以使用:picker-options道具设置选项：

<el-date-picker 
  v-model="form.in_between_date" 
  :picker-options="inBetweenDatesPickerOptions" 
  type="date">
</el-date-picker>

Answer 5

一个更简单的解决方案是动态限制最小值/最大值。我建议这样做：

<input type="date" class="form-control" v-model="dateFrom" :max="dateTo">
<input type="date" class="form-control" v-model="dateTo" :min="dateFrom">

这会将日期选择器限制在适当的日期范围内。