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;
			}
		}
	}
}
相关推荐
计算机魔术师5 小时前
Suno 发布 v6 音乐模型,推出 v6、v6-wild、v6-mini 三个版本
前端
whyweplay6 小时前
elpis : DSL动态组件学习
前端
用户921080262866 小时前
前端 Vue 专栏 06:异步更新机制、任务队列与 nextTick
前端
杨芋爽6 小时前
管理后台列表页为什么一直转圈?从一次 1+N 请求扇出聊聊前端性能优化
javascript
晴天166 小时前
Chrome DevTools 深度调试指南
前端·chrome·chrome devtools
林冠宏_指尖下的幽灵7 小时前
AI发展下的后编程时代思考
前端·人工智能·后端
_山海7 小时前
Bun入门指南
前端·javascript·后端
想睡懒觉7 小时前
我用 CSS 3D 做了个星空隧道 Loading,没有 Three.js
前端
labixiong7 小时前
transition 写在 CSS 变量上为什么不生效?给变量补张「类型身份证」
前端·css·html