时间组件主要配置:picker-options事件,限制选择范围
1template
//prop可配合rule验证 prop="xx"
<el-form-item style="width: 100%" label="时间" >
<el-date-picker
class="selectdata"
:popper-append-to-body="false"
v-model="time"
type="datetime"
:size="'mini'"
:clearable="true"
placeholder="选择时间"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptionsStart"
>
</el-date-picker>
<i class="line">一</i>
<el-date-picker
class="selectdata"
:popper-append-to-body="false"
v-model="time2"
type="datetime"
:size="'mini'"
:clearable="true"
placeholder="选择时间"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptionsEnd"
>
</el-date-picker>
</el-form-item>
2script
//data
data() {
return {
pickerOptionsStart: {
disabledDate: (time) => {
let endRepairDateVal = this..time2;
if (endRepairDateVal) {
return time.getTime() > new Date(endRepairDateVal).getTime();
}
},
},
pickerOptionsEnd: {
disabledDate: (time) => {
let beginDateVal = this..time;
if (beginDateVal) {
return time.getTime() < new Date(beginDateVal).getTime();
}
},
},
time1,
time2,
}
}
...