elementUI动态设置日期组件datepicker的禁用日期disabledDate

本文转载自查看原文 2020-09-03 10:46 3090

记录下上周项目需求中的问题，如有更好的方法，欢迎大家留言交流

有两个日期选择器，开始日期选择后，结束日期只能选择开始日期之后的日期，开始日期之前的禁选

 1 <el-form-item label="注册开始日期" >
 2                                 <el-date-picker
 3                                         v-model="form.businessLicenseStart"
 4                                         type="date"
 5                                         format="yyyy-MM-dd"
 6                                         value-format = "yyyy-MM-dd"
 7                                         @@change="cleareEndData"
 8                                         placeholder="选择注册开始日期">
 9                                 </el-date-picker>
10                             </el-form-item>
11                             <el-form-item label="注册结束日期">
12                                 <el-date-picker
13                                         v-model="form.businessLicenseEnd"
14                                         type="date"
15                                         format="yyyy-MM-dd"
16                                         value-format = "yyyy-MM-dd"
17                                         :picker-options="pickerOptions"
18                                         placeholder="选择注册结束日期">
19                                 </el-date-picker>
20                             </el-form-item>
21 

22 form:{
23      "businessLicenseStart":"",
24      "businessLicenseEnd":"",
25 }
        
26 //改变时触发计算属性
27 computed:{
28             pickerOptions:function(){
29                 var _this = this
30                 return {
31                     disabledDate(time) {
32                         let licenseStart = new Date(_this.form.businessLicenseStart);
33                         licenseStart.setDate(licenseStart.getDate()-1);
34                         return time.getTime() < licenseStart.getTime();
35                     }
36                 }
37             }
38         },

39  // 清除注册结束日期
40 cleareEndData:function(){
41                 var _this = this
42                 _this.form.businessLicenseEnd = ''
43             },

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 ElementUI 之 DatePicker 日期限制范围 disabledDate antd-design日期组件DatePicker不可用时间disabledDate设置 elementUI 控制 DatePicker组件不能选择设定的日期 antDesign DatePicker 禁用日期 Element UI disableddate设置动态时间,结束日期不可大于开始日期以及时间点 antd DatePicker日期控件设置禁用时间范围日期选择组件（DatePicker）的实现 elementUI 日期选择禁用除周五之外的日期【ElementUI】DatePicker 日期选择器设置日期，只能选择今天和未来时间 elementUI（datepicker）限制日日期的选择