1、引用时间控件
<template>
<div class="black-list">
<el-form-item label="进场时间" label-width="120px" prop="actualEnterTime">
<el-date-picker
v-model='traceabilityfrom.actualEnterTime'
@change='getdataTime' --时间值改变事件
type='datetimerange'
range-separator="至"
placeholder='选择日期时间'
align='center'
:default-time="['00:00:00', '23:59:59']"
clearable
:picker-options="pickerOptions" --限制时间
size="medium"
>
</el-date-picker>
</el-form-item>
</div>
</template>
2、data声明
import dayjs from 'dayjs'; //时间插件
const times = [
dayjs().format('YYYY-MM-DD') + ' 00:00:00'
]
export default {
data() {
return {
//时间控件value值
traceabilityfrom:{
actualEnterTime: [],
actualEnterStartTime: '',
actualEnterEndTime: '',
},
pickValue:'', // 存放getOnPick函数返回的数据
pickerOptions: {
onPick: this.getOnPick,
disabledDate: this.disabledDate
},
}
},
}
3、method定义时间控件方法
import dayjs from 'dayjs'; //时间插件
//获取当前时间
const times = [
dayjs().format('YYYY-MM-DD') + ' 00:00:00'
]
export default {
data(){
...
},
methods: {
//时间改变事件
getdataTime(val) {
let f = 'YYYY-MM-DD HH:mm:ss'
if(val===null){
this.traceabilityfrom.actualEnterTime = []
this.traceabilityfrom.actualEnterStartTime = ''
this.traceabilityfrom.actualEnterEndTime = ''
return
}
if (Array.isArray(val)) {
if (val[1]) {
this.traceabilityfrom.actualEnterEndTime = dayjs(val[1]).format(f)
}
if (val[0]) {
this.traceabilityfrom.actualEnterStartTime = dayjs(val[0]).format(f)
}
} else {
this.traceabilityfrom.actualEnterStartTime = times[0]
this.traceabilityfrom.actualEnterEndTime= times[1]
this.traceabilityfrom.actualEnterTime = times
}
},
//获取
getOnPick(pick) {
this.pickValue = pick;
},
//超出范围禁止
disabledDate(date) {
const { minDate, maxDate } = this.pickValue;
if (minDate && !maxDate) {
const diff = Math.abs(minDate.valueOf() - date.valueOf());
if (diff > 1000 * 3600 * 24 * 90) {
return true;
}
}
},
}
}