我有两个日期选择器用于startDate和endDate。 在startDate Picker中,我想在endDate之前禁用所有日期,反之亦然。 如何使用elemnt-ui禁用日期。 >
答案 0 :(得分:8)
这是一个老问题,但我今天也问了同样的问题。您可以使用disabledDate
选择器选项实现此目的。以下是关于如何禁用所有未来日期的示例:
<el-date-picker
:picker-options="datePickerOptions"
</el-date-picker>
然后在您的数据对象中:
data () {
return {
datePickerOptions: {
disabledDate (date) {
return date > new Date()
}
}
}
}
答案 1 :(得分:5)
你应该为你的结束日期输入定义选择器选项。 主要问题是在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修复为等于。
答案 2 :(得分:1)
如果您想体验一下,可以尝试一下:
datePickerOptions: {
disabledDate: this.disabledDueDate
}
和您的方法:
methods: {
disabledDueDate(date) { // format Date!
return !(date >= this.start && date <= this.end)
},
}
答案 3 :(得分:0)
一个更简单的解决方案是动态限制最小值/最大值。我建议这样做:
<input type="date" class="form-control" v-model="dateFrom" :max="dateTo">
<input type="date" class="form-control" v-model="dateTo" :min="dateFrom">
这会将日期选择器限制在适当的日期范围内。
答案 4 :(得分:0)
我通过将选择器选项放在计算属性中并使用 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>