element UI 日期组件(限制开始日期和结束日期范围)

 

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!--日期start-->
     <el-form-item label="提交时间:">
         <div class="block">
             <!-- <span class="demonstration"></span> -->
 
             <el-date-picker
                 value-format="yyyy-MM-dd"
                 v-model="searchFrom.begTime"
                 :picker-options="startDateLimit"
                 placeholder="开始日期">
             </el-date-picker>
             -
             <el-date-picker
                 value-format="yyyy-MM-dd"
                 v-model="searchFrom.endTime"
                 :picker-options="endDateLimit"
                 placeholder="结束日期">
             </el-date-picker>
         </div>
     </el-form-item>
<!--日期end-->                       

  

 

 

 

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
se        archFrom: sessionStorage.getItem("save_search") ? JSON.parse(sessionStorage.getItem("save_search")):{
                    orderStatus: "",
                    orderNo: '',
                    begTime:"",
                    endTime:"",
                    supplierInfoName:"",
                    userName:"",
                    purchaseType:""
                },
                //日期限制
                startDateLimit: {
                    disabledDate: (time) => {
                        let endTime = this.searchFrom.endTime;
                        if (endTime) {
                            return time.getTime() > new Date(endTime).getTime();
                        }
                    }
                },
                endDateLimit: {
                    disabledDate: (time) => {
                        let beginTime = this.searchFrom.begTime;
                        if (beginTime) {
                            return time.getTime() < new Date(beginTime).getTime() - 8.64e7;  //开始和结束可以选择同一天
                        }
                    }
                },

  

posted @   Action_swt  阅读(1373)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示