el-date-picker限制选中时间范围半年
时间: 2023-10-03 17:08:29 浏览: 192
datepicker 前端时间范围选择
你可以使用 `picker-options` 属性来设置 `el-date-picker` 的选项。其中,`disabledDate` 属性可以用来控制哪些日期不可选。
以下是一个设置 `el-date-picker` 选中时间范围半年的示例:
```html
<template>
<el-date-picker
v-model="date"
:picker-options="pickerOptions"
type="date"
placeholder="选择日期">
</el-date-picker>
</template>
<script>
export default {
data() {
return {
date: null,
pickerOptions: {
disabledDate(time) {
const start = new Date()
start.setTime(start.getTime() - 180 * 24 * 60 * 60 * 1000) // 半年前
return time.getTime() < start.getTime() || time.getTime() > Date.now() // 不可选时间范围为半年前到当前时间
}
}
}
}
}
</script>
```
在上面的示例中,我们设置 `disabledDate` 函数来禁用一些日期。该函数接受一个 `time` 参数,表示日期时间戳,我们可以通过比较时间戳来确定该日期是否可选。在本例中,我们使用 `new Date()` 来获取当前时间,然后减去 180 天来获取半年前的时间。然后,我们将 `disabledDate` 函数返回一个布尔值,表示给定的日期是否可选。如果日期在半年前或当前时间之后,则该日期不可选。
阅读全文