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;
			}
		}
	}
}
相关推荐
似水流年QC20 小时前
Chrome Performance 面板前端性能分析从入门到实战
前端·chrome
君穆南20 小时前
docker里面的minio的备份方法
前端
Thomas214320 小时前
--remote-debugging-port=9222 和 chrome://inspect/#remote-debugging 区别
前端·chrome
Luna-player20 小时前
二本生找前端工作
前端
M ? A20 小时前
Vue3 转 React 工具 VuReact v1.6.0 更新:useAttrs 完美兼容,修复模板迁移 / 类型错误
前端·javascript·vue.js·react.js·开源·vureact
计算机学姐20 小时前
基于SpringBoot的充电桩预约管理系统【阶梯电费+个性化推荐+数据可视化】
java·vue.js·spring boot·后端·mysql·信息可视化·mybatis
低保和光头哪个先来21 小时前
解决 ios 使用 video 全屏未铺满页面问题
前端·javascript·vue.js·ios·前端框架
MacroZheng21 小时前
全面升级!看看人家的后台管理系统,确实清新优雅!
前端·vue.js·typescript
Mintopia21 小时前
一套简单但有效的"代码可读性"提升法:不用重构也能清爽
前端
每天吃饭的羊21 小时前
Node.js 创建可二次编辑的 HTML 文档并生成文件
开发语言·javascript·ecmascript