<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
<el-form-item label="查询日期" prop="searchTime">
<el-date-picker v-model="filters.searchTime" type="daterange" class="widthFluid"
start-placeholder="开始日期"
range-separator="至"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions"
@change="dataChange" />
</el-form-item>
</el-col>
pickerMinDate: '', // 获取开始选择时间
pickerMaxDate: '', // 获取结束选择时间
pickerOptions: { // 时间范围选择控制
onPick: ({ maxDate, minDate }) => {
if (minDate) {
this.pickerMaxDate = ''
this.pickerMinDate = minDate.getTime()
}
if (maxDate) {
this.pickerMinDate = ''
this.pickerMaxDate = maxDate.getTime()
}
},
disabledDate: (time) => {
const day30 = (30 - 1) * 24 * 3600 * 1000
if (this.pickerMinDate !== '') {
if (!this.pickerMaxDate) {
let maxTime = this.pickerMinDate + day30
let minTime = this.pickerMinDate - day30
if (maxTime > moment()) {
maxTime = moment()
}
return time.getTime() > maxTime || time.getTime() > moment() || time.getTime() < minTime
} else {
let maxTime = this.pickerMinDate + day30
if (maxTime > moment()) {
maxTime = moment()
}
return time.getTime() > maxTime || time.getTime() > moment()
}
}
if (this.pickerMaxDate !== '' && !this.pickerMinDate) {
let minTime = this.pickerMaxDate - day30
return time.getTime() < minTime || time.getTime() > moment()
}
return time.getTime() > moment()
}
// 重置最大最小选择日期
dataChange(val) {
if (!val) {
this.pickerMinDate = ''
this.pickerMaxDate = ''
}
},
element-ui时间组选择日期件不能超过30天
最新推荐文章于 2024-05-22 18:11:11 发布