element-ui中DateTimePicker 日期时间选择器从选择的开始时间往后退一年这一年内时间可随意选不在一年内的时间禁用
可以通过设置DateTimePicker的disabledDate属性来实现禁用不在一年内的时间,具体实现步骤如下:
-
获取选择的开始时间,可以通过DateTimePicker的change事件获取到。
-
创建一个函数,用于判断日期是否在一年内,如果不在一年内则返回true,否则返回false。
-
将该函数赋值给DateTimePicker的disabledDate属性。
下面是具体的代码实现:
<template>
<div>
<el-date-picker
v-model="startDate"
type="datetime"
@change="handleChange"
:disabled-date="disabledDate"
></el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
startDate: null
};
},
methods: {
handleChange(value) {
// 获取选择的开始时间
this.startDate = value;
},
disabledDate(date) {
// 判断日期是否在一年内
const oneYearAgo = new Date(this.startDate);
oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
return date < oneYearAgo || date > new Date();
}
}
};
</script>
在上面的代码中,我们通过disabledDate函数来判断日期是否在一年内,其中oneYearAgo变量表示选择的开始时间往前一年的时间,如果日期小于oneYearAgo或大于当前时间,则该日期被禁用。
原文地址: https://www.cveoy.top/t/topic/b2Z9 著作权归作者所有。请勿转载和采集!