elementUI日期范围选择组件实现日期选择跨度最多一年

1.利用picker-options配置

<el-date-picker
	v-model="topForm.time"
	type="daterange"
	range-separator="-"
	start-placeholder="开始日期"
	end-placeholder="结束日期"
	value-format="yyyy-MM-dd"
	:picker-options="pickerOptions"
	:clearable="false"
	@change="() => {
					calculateUnit();
					getPerformanceData();
	}">

2.引入dayjs,作为日期计算

import dayjs from 'dayjs';

3.设置data,在data中配置pickerOptions,监听onPick回调方法,存储点击的日期,再把日期加2年和减两年计算,算出disabledDate禁用的范围

data() {
		return {
			pickerMinDate: "",
			pickerOptions: {
				onPick: (date) => {
					this.pickerMinDate = new Date(date.minDate);
				},
				disabledDate: (time) => {
					if (this.pickerMinDate) {
						let maxTime = dayjs(this.pickerMinDate).add(2, 'year');
						let minTime = dayjs(this.pickerMinDate).subtract(2, 'year');
						return Date.now() < time.getTime() || (time.getTime() > maxTime.valueOf() || time.getTime() < minTime.valueOf());
					} else {
						return Date.now() < time.getTime();
					}
				}
			}
		};
	},

4.最终效果图

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值