需求是开始结束日期不得大于当前时间,当开始日期发生变化时,结束日期不得小于开始日期且不得大于当前日期
<el-form-item label="开始日期:"> <el-date-picker size="mini" v-model="form.startDate" value-format="yyyyMMdd" type="date" placeholder="选择开始日期" :picker-options="pickerBeginDateBefore" @change="changeTime" ></el-date-picker> </el-form-item> <el-form-item label="结束日期:"> <el-date-picker size="mini" v-model="form.endDate" value-format="yyyyMMdd" type="date" placeholder="选择结束日期" :picker-options="pickerBeginDateAfter" ></el-date-picker> </el-form-item>
data数据展示如下: // 开始时间disabled pickerBeginDateBefore: { disabledDate: time = > { return time.getTime() > Date.now(); } }, // 结束时间disabled pickerBeginDateAfter: { disabledDate: time = > { return time.getTime() > Date.now(); } }, 方法: changeTime() { let self = this; self.form.endDate = ''; self.pickerBeginDateAfter = { disabledDate(time) { let timeyear = time.getFullYear(); let timemonth = time.getMonth() + 1; if (timemonth >= 1 && timemonth <= 9) { timemonth = '0' + timemonth; } let timeday = time.getDate(); if (timeday >= 1 && timeday <= 9) { timeday = '0' + timeday; } let currentTime = timeyear.toString() + timemonth.toString() + timeday.toString(); if (currentTime < self.form.startDate || currentTime > self.currentDate) { return true; } } }; }, getCurrentTimeStr() { var currentDate = new Date(); var currentTimeStrBefore = null; var currentTimeStr = null; var year = currentDate.getFullYear().toString(); var month = (currentDate.getMonth() + 1).toString(); var date = currentDate.getDate().toString(); var dateBefore = (currentDate.getDate() - 1).toString(); currentTimeStrBefore = year + month + dateBefore; currentTimeStr = year + month + date; this.currentDate = currentTimeStr; this.form.startDate = currentTimeStrBefore; this.form.endDate = currentTimeStr; },