最近在做活动配置，那么就会需要配置活动的开始时间和活动的结束时间，对于活动开始时间选择范围是不能今天之前时间的，活动的结束时间也是，是不能选择今天之前的时间和活动开始之前时间的，有了明确的目的，现在就来解决它！
根据element官网提供的属性,来实现它
html部分
<el-form-itemlabel="活动时间"prop="startTime":rules="[{required: true,message: '请选择活动开始日期',trigger: 'change',},]"><el-date-pickerv-model="form.startTime"value-format="yyyy-MM-dd HH:mm:ss"type="datetime"placeholder="选择活动开始日期"clearable:picker-options="pickerOptionsStart"/></el-form-item><el-form-itemlabel=""label-width="8px"prop="endTime":rules="[{required: true,message: '请选择活动结束日期',trigger: 'change',},]"><el-date-pickerv-model="form.endTime"value-format="yyyy-MM-dd HH:mm:ss"type="datetime"placeholder="选择活动结束日期"clearable:picker-options="pickerOptionsEnd"/></el-form-item>
js部分
export default {data() {return {form: {startTime: "", // 开始时间endTime: "", // 结束时间},// 限制时间范围// 活动开始时间不能选择今天之前的时间 今天之前的时间设置禁止选择状态pickerOptionsStart: {disabledDate: (time) => {if (this.form.endTime) {return (time.getTime() < Date.now() - 8.64e7 ||time.getTime() > this.form.endTime);}return time.getTime() < Date.now() - 8.64e7;},},// 活动结束时间不能选择活动开始的之前的时间//比如选择活动开始时间为4.16日，那么4.16日之前都要为禁止选择状态pickerOptionsEnd: {disabledDate: (time) => {return (time.getTime() < Date.now() - 8.64e7 ||time.getTime() < new Date(this.form.startTime).getTime());},},};},};
最终效果：
