Element UI DateTimePicker: 限制选择时间范围 - 最长选到开始时间往后一年
可以通过设置 DateTimePicker 组件的属性来实现最长只能选到开始时间往后退一年的功能。具体步骤如下:
- 在 DateTimePicker 组件中设置 type 属性为'datetime',表示使用日期时间选择器。
- 设置 picker-options 属性,其中设置 disabledDate 属性为一个函数,用于判断日期是否可选。函数接收一个参数 date,表示当前日期,需要返回一个布尔值,表示该日期是否可选。在函数中判断当前日期是否比开始时间往后推一年还晚,如果是则返回 true,表示该日期不可选。
- 在 DateTimePicker 组件中设置 value-format 属性为'yyyy-MM-dd HH:mm:ss',表示日期时间的显示格式。
下面是示例代码:
<template>
<div>
<el-date-time-picker
v-model="dateTime"
type="datetime"
:picker-options="pickerOptions"
value-format="yyyy-MM-dd HH:mm:ss"
></el-date-time-picker>
</div>
</template>
<script>
export default {
data() {
return {
dateTime: '',
pickerOptions: {
disabledDate(date) {
const startDate = new Date('2020-01-01 00:00:00')
const endDate = new Date(startDate.getFullYear() + 1, startDate.getMonth(), startDate.getDate(), 23, 59, 59)
return date > endDate
}
}
}
}
}
</script>
原文地址: https://www.cveoy.top/t/topic/nm6U 著作权归作者所有。请勿转载和采集!