DOM
<el-date-picker
v-model="timeRange"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="datepickerOptions">
data: datepickerOptions
datepickerOptions: {
onPick: ({ maxDate, minDate }) => {
this.choiceDate = minDate.getTime()
if (maxDate) this.choiceDate = ''
},
disabledDate: (time) => {
if (this.choiceDate) {
const one = 90 * 24 * 3600 * 1000
const minTime = this.choiceDate - one
const maxTime = this.choiceDate + one
return time.getTime() < minTime || time.getTime() > maxTime || time.getTime() > Date.now()
} else {
let curDate = new Date().getTime()
let three = 90 * 24 * 3600 * 1000
let threeMonths = curDate - three
return time.getTime() > Date.now() || time.getTime() < threeMonths
}
},
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
}