el-date-picker限制一年
时间: 2023-10-03 17:08:31 浏览: 120
el-date-picker 英文改中文.doc
5星 · 资源好评率100%
可以通过设置 `picker-options` 中的 `disabledDate` 方法来限制 el-date-picker 只能选择一年内的日期。具体实现方法如下:
```html
<template>
<el-date-picker
v-model="date"
type="date"
:picker-options="pickerOptions"
></el-date-picker>
</template>
<script>
export default {
data() {
return {
date: null,
pickerOptions: {
disabledDate: time => {
const yearStart = new Date()
yearStart.setMonth(0)
yearStart.setDate(1)
const yearEnd = new Date()
yearEnd.setMonth(11)
yearEnd.setDate(31)
return time.getTime() < yearStart.getTime() || time.getTime() > yearEnd.getTime()
}
}
}
}
}
</script>
```
上面的代码中,我们在 `picker-options` 中设置了 `disabledDate` 方法,该方法接收一个日期对象作为参数,返回一个布尔值,表示该日期是否可以被选中。我们在该方法中先创建了一个当前年份的起始日期和结束日期,然后将传入的日期对象与这两个日期进行比较,如果传入的日期早于起始日期或晚于结束日期,则该日期会被禁用。这样就实现了限制 el-date-picker 只能选择一年内日期的效果。
阅读全文