el-date-picker设置了以下的picker-options参数,没有实现限制选择一个月的效果:
<el-date-picker v-model="SNData.date"
unlink-panels
clearable
type="datetimerange"
size="small"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right"
:editable="false">
</el-date-picker>
data() {
return {
selectDate: '',
pickerOptions: {
onPick: ({ maxDate, minDate }) => {
this.selectDate = minDate.getTime()
if (maxDate) {
this.selectDate = ''
}
},
disabledDate: (time) => {
if (this.selectDate !== '') {
const one = 30 * 24 * 3600 * 1000
const minTime = this.selectDate - one
const maxTime = this.selectDate + one
return time.getTime() < minTime || time.getTime() > maxTime
}
}
},
}
}
大家有没有可以解决的方案?
后面通过change事件,做了一个伪功能提示报错信息,代码如下:
<el-date-picker v-model="SNData.date"
unlink-panels
clearable
type="datetimerange"
size="small"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right"
@change="changeTime"
:editable="false">
</el-date-picker>
data() {
return {
SNData: {
date: '',
enddate: '',
model: '',
},
selectDate: '',
createStartDate: '',
createEndDate: '',
pickerOptions: {
onPick: ({ maxDate, minDate }) => {
this.selectDate = minDate.getTime()
if (maxDate) {
this.selectDate = ''
}
},
disabledDate: (time) => {
if (this.selectDate !== '') {
const one = 30 * 24 * 3600 * 1000
const minTime = this.selectDate - one
const maxTime = this.selectDate + one
return time.getTime() < minTime || time.getTime() > maxTime
}
}
},
};
},
methods: {
changeTime() {
if (this.SNData.date) {
this.createStartDate = parseTime(new Date(this.SNData.date[0]), '{y}-{m}-{d} {h}:{m}:{s}');
this.createEndDate = parseTime(new Date(this.SNData.date[1]), '{y}-{m}-{d} {h}:{m}:{s}');
const numDays = (new Date(this.SNData.date[1]).getTime() - new Date(this.SNData.date[0]).getTime()) / (24 * 3600 * 1000);
if (numDays > 30) {
this.$alert('时间范围不能超过一个月,请重新选择!', '警告', {
confirmButtonText: '确定',
});
this.SNData.date = null;
this.createStartDate = '';
this.createEndDate = '';
}
} else {
this.createStartDate = '';
this.createEndDate = '';
}
}
},