<el-date-picker
v-model="selectedDateValue"
type="daterange"
value-format="yyyy-MM-dd"
:clearable="false"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
/>
data() {
return {
selectedDateValue: [], // 日期区间
choiceDate: '', // 开始日期
/**
* 日期范围限制
* 根据开始日期月份限制当月,不能跨月
*/
pickerOptions: {
onPick: ({ maxDate, minDate }) => {
this.choiceDate = minDate.getTime()
if (maxDate) {
this.choiceDate = ''
}
},
disabledDate: time => {
if (this.choiceDate) {
const startDay =
(new Date(this.choiceDate).getDate() - 1) * 24 * 3600 * 1000
const endDay =
(new Date(
new Date(this.choiceDate).getFullYear(),
new Date(this.choiceDate).getMonth() + 1,
0
).getDate() -
new Date(this.choiceDate).getDate()) *
24 *
3600 *
1000
const minTime = this.choiceDate - startDay
const maxTime = this.choiceDate + endDay
return time.getTime() < minTime || time.getTime() > maxTime
}
}
}
}
}