el-date-picker日期选择组件,限制选择区间1年,最大
2022-06-08 本文已影响0人
十一点后不在线
// html代码
<el-date-picker
type="daterange"
class="time_range"
@change="handleDateChange"
:picker-options="pickerOptions"
v-model="dateRange"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
:default-time="['00:00:00', '23:59:59']"
clearable
>
// 过滤规则
pickerOptions: {
onPick: ({ maxDate, minDate }) => {
this.selectDate = minDate.getTime()
if (maxDate) {
this.selectDate = ''
}
},
disabledDate: time => {
// time.getTime()获取的是时间戳
// 只能选择365天的范围且不能大于当前日期
const choiceDateTime = new Date(this.selectDate).getTime()
const minTime = new Date(choiceDateTime).setMonth(new Date(choiceDateTime).getMonth() - 12)
const maxTime = new Date(choiceDateTime).setMonth(new Date(choiceDateTime).getMonth() + 12)
const min = minTime
const newDate = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1
const max = newDate < maxTime ? newDate : maxTime
// 如果已经选中一个日期 则 返回 该日期前后12个月时间可选,后12个月最大为当前日期
if (this.selectDate) {
return time.getTime() < min || time.getTime() > max
}
// 若一个日期也没选中 则 返回 当前日期以前日期可选
return time.getTime() > newDate
// 以下写法虽然可以控制一个一年区间,但是当天的日期无法单独选中,弃用
// if (this.selectDate !== '') {
// // console.log('123', this.selectDate)
// const one = 24 * 3600 * 1000 * 365
// const minTime = this.selectDate - one
// const maxTime = this.selectDate + one
// if (maxTime > Date.now()) {
// return (
// time.getTime() < minTime ||
// time.getTime() >
// new Date(new Date().toLocaleDateString()).getTime()
// )
// } else {
// return time.getTime() < minTime || time.getTime() > maxTime
// }
// } else {
// return (
// time.getTime() >
// new Date(new Date().toLocaleDateString()).getTime()
// )
// }
}
},
// 字段赋值
handleDateChange(checkedDate) {
this.listQuery.beginTime = checkedDate ? checkedDate[0] : ''
this.listQuery.endTime = checkedDate ? checkedDate[1] : ''
},