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）限制日日期的選擇