<template>
|
<el-form-item label="时间" prop="timeArray">
|
<el-date-picker
|
:model-value="modelValue"
|
@update:model-value="handleChange"
|
:type="type"
|
start-placeholder="选择开始时间"
|
end-placeholder="选择结束时间"
|
size="small"
|
:disabled-date="diableData"
|
/>
|
</el-form-item>
|
</template>
|
|
<script>
|
import moment from 'moment';
|
import { ElMessage } from 'element-plus';
|
|
export default {
|
props: {
|
// 日期值
|
modelValue: {
|
type: Array
|
},
|
// 控件类型
|
type: {
|
type: String,
|
default: 'datetimerange'
|
},
|
// 允许开始时间
|
startDate: Date,
|
// 允许结束时间
|
endDate: Date
|
},
|
emits: ['update:modelValue'],
|
data() {
|
return {};
|
},
|
methods: {
|
handleChange(value) {
|
// 时间不能超过设定的开始结束时间
|
let outRange = false;
|
if (this.startDate) {
|
outRange =
|
outRange ||
|
moment(value[0]).isBefore(this.startDate) ||
|
moment(value[1]).isBefore(this.startDate);
|
}
|
if (this.endDate) {
|
outRange =
|
outRange ||
|
moment(value[0]).isAfter(this.endDate) ||
|
moment(value[1]).isAfter(this.endDate);
|
}
|
if (outRange) {
|
ElMessage({
|
message: '所选时间不能超过走航任务时间范围',
|
type: 'warning'
|
});
|
} else {
|
this.$emit('update:modelValue', value);
|
}
|
},
|
diableData(date) {
|
const time = moment(date);
|
let result1 = false;
|
let result2 = false;
|
if (this.startDate) {
|
result1 = time.isBefore(this.startDate);
|
}
|
if (this.endDate) {
|
result2 = time.isAfter(this.endDate);
|
}
|
return result1 || result2;
|
}
|
},
|
mounted() {
|
// this.handleChange();
|
}
|
};
|
</script>
|
