Element中DatePicker日期选择器跨度只能选一年如何实现?

只需要给标签加上pickerOptions,当前时间日期选择器特有的选项参考下表

typescript 复制代码
<el-date-picker
	v-model="FormData.time"
	value-format="yyyy:MM:DD"
	:picker-options="pickeroptions"
	type-"daterange"
	range-separator="至"
	start-placeholder="开始日期"
	end-placeholder="结束日期"
</el-date-picker>
typescript 复制代码
// 方法一:时间跨度为之前一年
 pickerOptions:{
   disabledDate: () => false,
   onPick: ({ maxDate, minDate }) => {
     if (minDate && !maxDate) {
       const oneYear = 365 * 24 * 60 * 60 * 1000;
       this.pickerOptions.disabledDate = time => {
       return time.getTime() < minDate.getTime() || time.getTime() > minDate.getTime() + oneYear;
       };
     } else {
       this.pickerOptions.disabledDate = () => false;
     }
   },
},

//方法二:
pickDate:"",
pickerOptions:{
	onPick: this.getPickDate,
	disabledDate:this.disabledDate
}

methods:{
	getPickDate(pick){
		this.pickDate = pick
	},
	disabledDate(date){
		const {minDate,maxDatel}= this.pickDate,
		if(minDate && !maxDate){
			const diff = Math.abs(minDate.valueof()- date.valueof())
			if(diff >1000*3600*24*365){
				return true;
			}
		}
	}
}
相关推荐
Mintopia13 小时前
🚀 Next.js 全栈 E2E 测试:Playwright vs Cypress
前端·javascript·next.js
原生高钙13 小时前
JS设计模式指南
前端·javascript
拳打南山敬老院13 小时前
漫谈 MCP 构建之Resources篇
前端·后端·ai编程
golang学习记13 小时前
从0死磕全栈第九天:Trae AI IDE一把梭,使用react-query快速打通前后端接口调试
前端
超人92113 小时前
我用纯前端技术打造了一个开发者工具箱,10+实用工具助力提效!
前端
bug_kada13 小时前
详解 React useCallback & useMemo
前端·react.js
Mintopia13 小时前
⚡ WebAssembly 如何加速 AIGC 模型在浏览器中的运行效率?
前端·javascript·aigc
AAA_Tj13 小时前
前端动画技术全景指南:四大动画技术介绍
前端
断竿散人13 小时前
乾坤微前端框架的沙箱技术实现原理深度解析
前端·javascript·前端框架
进阶的鱼13 小时前
(4种场景)单行、多行文本超出省略号隐藏
前端·css·面试