element-ui DatePicker 日期选择器设置结束日期不得早于开始日期不早于当前日期

2,543 阅读1分钟

html部分

<el-form-item label="开始时间" class="marLeft15">
  <el-date-picker v-model="ruleForm.startDate" :picker-options="pickerOptions0" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
<el-form-item label="结束时间" class="marLeft15">
 <el-date-picker v-model="ruleForm.endDate" :picker-options="pickerOptions1" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>

data return 部分

data() {
        return {
            pickerOptions0: {//结束时间不能大于开始时间
                disabledDate: (time) => {
                    if (this.ruleForm.endDate) {
                        return time.getTime() > new Date(this.ruleForm.endDate).getTime();
                    }else{//还没有选择结束时间的时候,让他只能选择今天之前的时间包括今天
                        return time.getTime() > Date.now() - 8.64e7;
                    } 
 
                }
            },
            pickerOptions1: {
                disabledDate: (time) => {
                    if(this.ruleForm.startDate){
                      return time.getTime() < new Date(this.ruleForm.startDate).getTime() - 1*24*60*60*1000 || time.getTime() > Date.now() - 8.64e7;//可以选择同一天
                    }
                }
            },
   }
 }