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;
			}
		}
	}
}
相关推荐
白臻4 分钟前
小程序 npm 支持
前端·小程序·npm
lyllovelemon7 分钟前
🍭🍭🍭五分钟带你掌握next国际化最佳实践
前端·react.js·面试
hlyling38 分钟前
一键高效处理,批量缩放PNG图片,按比例轻松调整,高效工作从此开始!
javascript·python·c#·objective-c·batch·symfony
用户4099322502121 小时前
Nuxt框架中内置组件详解及使用指南(三)
前端·vue.js·nuxt.js
化作繁星1 小时前
vue3项目图片压缩+rem+自动重启等plugin使用与打包配置
前端·vue·vite
u0104058362 小时前
构建可扩展的Java Web应用架构
java·前端·架构
swimxu2 小时前
npm 淘宝镜像证书过期,错误信息 Could not retrieve https://npm.taobao.org/mirrors/node/latest
前端·npm·node.js
qq_332394202 小时前
pnpm的坑
前端·vue·pnpm
雾岛听风来2 小时前
前端开发 如何高效落地 Design Token
前端
不如吃茶去2 小时前
一文搞懂React Hooks闭包问题
前端·javascript·react.js