element-ui el-datepicker动态获取disabledDate限制日期范围

最新推荐文章于 2025-09-18 09:39:50 发布

原创最新推荐文章于 2025-09-18 09:39:50 发布 · 1.1w 阅读

2 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

13 篇文章

订阅专栏

Vue.js

2 篇文章

订阅专栏

本文介绍了一个使用Element UI的日期选择器组件实现自定义日期范围选择的功能。通过Vue.js的v-model双向绑定和picker-options属性，可以限制用户选择的日期范围。具体实现包括根据form.timeUnit的值动态调整disabledDate函数，以限制用户只能选择过去或未来的日期。

代码

 <template>
     <el-date-picker
         type="daterange"
         value-format="yyyyMMdd"
         format="yyyy-MM-dd"            	  
         placeholder="选择日期"
         range-separator="至"
         v-model="form.date"
         :picker-options="pickerOptions"
         unlink-panels>
     </el-date-picker> 
 </template>
 <script>
	export default {
		data() {
			return {
				form: {
					timeUnit: 1
				},
  				pickerOptions: {
					disabledDate: this.disabledDate
				}
  			}	
		},
		methods: {
			disabledDate(time) {
	           if (this.form.timeUnit == '1') {
               	return time.getTime() > Date.now();
	           } else {
                  return time.getTime() > Date.now() - 8.64e7;
               }
          }
	   }
	}
 </script>