el-date-picker 限制start-date和end-date只能在同一天
时间: 2023-10-21 21:09:08 浏览: 140
您可以使用 `range-separator` 属性和 `disabled-date` 属性来限制 `start-date` 和 `end-date` 只能在同一天。可以在 `disabled-date` 函数中判断 `start-date` 和 `end-date` 是否在同一天,如果不是,则返回 `true` 禁用该日期。
以下是示例代码:
```html
<template>
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
:disabled-date="disabledDate"
></el-date-picker>
</template>
<script>
export default {
data() {
return {
dateRange: []
}
},
methods: {
disabledDate(date) {
if (this.dateRange.length === 1) {
const [start, end] = this.dateRange
return start.toDateString() !== end.toDateString() || date < start || date > end
} else {
return false
}
}
}
}
</script>
```
在上面的代码中,我们使用 `dateRange` 存储日期范围。在 `disabled-date` 函数中,我们首先判断 `dateRange` 是否包含了起始日期和结束日期,如果包含了,就判断当前日期是否在这个日期范围内,如果不是,则返回 `true` 禁用该日期。否则,返回 `false` 允许选择该日期。
阅读全文