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;
			}
		}
	}
}
相关推荐
快起来别睡了11 分钟前
深入理解 Promise 的高阶用法:从入门到手写实现
前端
yvvvy16 分钟前
前端跨域全解析:从 CORS 到 postMessage,再到 WebSocket
前端·javascript·trae
摸着石头过河的石头1 小时前
手把手教你用VS Code玩转Gitee协作:从环境配置到高效提交
前端·visual studio code
张志鹏PHP全栈1 小时前
Vue3第十八天,Vue3中的组件通信
前端·vue.js
小周同学:2 小时前
在 Vue2 中使用 pdf.js + pdf-lib 实现 PDF 预览、手写签名、文字批注与高保真导出
开发语言·前端·javascript·vue.js·pdf
m0_494716682 小时前
CSS中实现一个三角形
前端·css
teeeeeeemo2 小时前
跨域及解决方案
开发语言·前端·javascript·笔记
JSON_L2 小时前
Vue Vant应用-数据懒加载
前端·javascript·vue.js
可爱小仙子2 小时前
vue-quill-editor上传图片vue3
前端·javascript·vue.js
IT毕设实战小研3 小时前
基于Spring Boot校园二手交易平台系统设计与实现 二手交易系统 交易平台小程序
java·数据库·vue.js·spring boot·后端·小程序·课程设计