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;
			}
		}
	}
}
相关推荐
PleaSure乐事16 分钟前
使用Vue的props进行组件传递校验时出现 Extraneous non-props attributes的解决方案
vue.js
m0_7482552620 分钟前
vue3导入excel并解析excel数据渲染到表格中,纯前端实现。
前端·excel
一条不想当淡水鱼的咸鱼42 分钟前
taro中实现带有途径点的路径规划
javascript·react.js·taro
土豆炒马铃薯。1 小时前
【Vue】前端使用node.js对数据库直接进行CRUD操作
前端·javascript·vue.js·node.js·html5
CC__xy1 小时前
Node二、Node.js 模块化、es6 软件包、Express - 框架
前端·node.js
zpjing~.~1 小时前
CSS 过渡动画效果
前端·css
Senar1 小时前
机器学习和前端
前端·人工智能·机器学习
GISer_Jing1 小时前
React基础知识(总结回顾一)
前端·react.js·前端框架
我叫czc2 小时前
【Python高级366】静态Web服务器开发
服务器·前端·python
温轻舟2 小时前
前端开发 -- 自动回复机器人【附完整源码】
前端·javascript·css·机器人·html·交互·温轻舟