Element中DatePicker日期选择器跨度只能选一年如何实现?

只需要给标签加上pickerOptions,当前时间日期选择器特有的选项参考下表


<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>
// 方法一:时间跨度为之前一年
 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;
			}
		}
	}
}

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-20 16:34:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-20 16:34:02       100 阅读
  3. 在Django里面运行非项目文件

    2024-04-20 16:34:02       82 阅读
  4. Python语言-面向对象

    2024-04-20 16:34:02       91 阅读

热门阅读

  1. 车联网安全发展形势、挑战与建议

    2024-04-20 16:34:02       33 阅读
  2. C++list类(个人笔记)

    2024-04-20 16:34:02       34 阅读
  3. 【无标题】

    2024-04-20 16:34:02       32 阅读
  4. WPF常用技巧-防止系统休眠

    2024-04-20 16:34:02       34 阅读
  5. 学习 Rust 的第七天:如何理解引用

    2024-04-20 16:34:02       35 阅读
  6. rust练习(待完成....)

    2024-04-20 16:34:02       36 阅读
  7. Spark面试整理-解释Spark中的广播变量和累加器

    2024-04-20 16:34:02       34 阅读
  8. 安全运维资料

    2024-04-20 16:34:02       32 阅读
  9. 【架构-15】NoSQL数据库

    2024-04-20 16:34:02       31 阅读
  10. Spring Cloud 面试题(一)

    2024-04-20 16:34:02       31 阅读