// 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] : ''
},
el-date-picker日期选择组件,限制选择区间1年,最大时间不能超过今天
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
相关阅读更多精彩内容
- 需求:限制当前选中日期前后30天不可选,大于当天的不可选。 0.view 1.template 2.data 3....
- picker-options 设置日期选择范围 disabledDate:不可选择的时间的置灰处理 getTime...
- 最终实现效果: 选择了开始时间,再选择结束时间的时候就不能早于开始时间;选择了结束时间,再选择开始时间的时候就不能...