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/b2T4 著作权归作者所有。请勿转载和采集!