预览效果
实现过程
<el-form-item label="申请日期" prop="applyTime">
<el-date-picker
type="date"
v-model="dataForm.applyTime"
:disabled="disabled"
value-format="yyyy-MM-dd"
placeholder="申请日期"
format="yyyy-MM-dd"
:picker-options="startDatePicker"
></el-date-picker>
</el-form-item>
<el-form-item label="授权日期" prop="authorityTime">
<el-date-picker
type="date"
v-model="dataForm.authorityTime"
:disabled="disabled"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
placeholder="授权日期"
:picker-options="endDatePicker"
></el-date-picker>
</el-form-item>
export default {
data() {
return {
startDatePicker: this.beginDate(),
endDatePicker: this.processDate(),
dataForm: {
applyTime: '',
authorityTime: '',
}
}
},
methods: {
beginDate () {
const that = this
return {
disabledDate (time) {
if (that.dataForm.authorityTime) {
return new Date(that.dataForm.authorityTime).getTime() < time.getTime()
}
}
}
},
processDate () {
const that = this
return {
disabledDate (time) {
if (that.dataForm.applyTime) {
return new Date(that.dataForm.applyTime).getTime() > time.getTime()
}
}
}
}
}
}
参考链接
开始时间、结束时间