<el-date-picker
v-model="chartsTime"
type="datetimerange"
:clearable='clearableState'
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
@change="changeTime"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
>
// 前后需要的天数-1
const space = 7
// 所选的第一个日期
let _minDate = ''
import { nowTime, yesterday } from "@/utils/time";
import dayjs from 'dayjs'
export default {
data() {
return {
chartsTime: [yesterday(), nowTime()],
clearableState:false,
pickerOptions: {
// 设置禁用状态
disabledDate: (time) => {
// 当选中第一个时间时
if (_minDate) {
// 最小时间
const min = dayjs(_minDate).subtract(space, 'day')
// 最大时间
const max = dayjs(_minDate).add(space, 'day')
return (
// 控制可以选择的时间范围
dayjs(time).isBefore(min) ||
dayjs(max).isBefore(time)
)
} else {
return false
}
},
// 选中日期后会执行的回调
onPick({ minDate }) {
_minDate = minDate
},
},
import dayjs from 'dayjs'