ant版本为1.3.1
<template>
<div>
<a-range-picker
:format="'YYYY-MM-DD HH:mm:ss'"
@change="onChange"
v-model="date"
:disabledDate="disabledDate"
:placeholder="['开始时间', '结束时间']"
@calendarChange="calendarChange"
/>
</div>
</template>
<script>
// 这里引入是可选的,但是引入后一些操作就会很简单
import moment from "moment";
export default {
data() {
return {
// 设置默认值在当前日期和当前日期的前一个月,接收一个数组
date: [moment().subtract(1, "month"), moment()],
start: "", // 用来记录开始时间
};
},
methods: {
moment,
onChange(date, dateString) {
// 开始时间置空
this.start = "";
},
// 这个事件记录面板发生变化,我们将选择的时间第一个赋值个start也就是开始时间
calendarChange(date, dateString) {
this.start = date[0];
},
disabledDate(current) {
if (this.start) {
return (
// 返回值是start开始日期的前后一个月并且不能选择当前日期后面的日期
((current > moment(this.start).add(1, "month") ||
current < moment(this.start).subtract(1, "month")) &&
current < moment()) ||
current > moment()
);
} else {
return current > moment();
}
},
},
};
</script>