Question

我有两个日期选择器用于startDate和endDate。在startDate Picker中，我想在endDate之前禁用所有日期，反之亦然。如何使用elemnt-ui禁用日期。＆GT;

Answer 1

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

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

然后在您的数据对象中：

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

Answer 2

你应该为你的结束日期输入定义选择器选项。主要问题是在picker选项的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方法，并检查startDate之前是否为endDate，然后将endDate修复为等于。

Answer 3

如果您想体验一下，可以尝试一下：

datePickerOptions: {
  disabledDate: this.disabledDueDate
}

和您的方法：

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

Answer 4

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

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

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

Answer 5

我通过将选择器选项放在计算属性中并使用 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>

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

5 个答案: