iview日期控件DatePicker设置不可选择的日期、不可选时间点

朴灿烈づ我的快乐病毒、 2021-11-26 14:10 2283阅读 1赞

近期要做一个预约功能，其中预约日期是有范围限制的，预约的时间点也是按后台配置起止时间的，这就需要前端将不需要的日期和时间设置为不可选择。

效果如下：

1、日期按照后台返回，控制能选择的日期。

2、时间的话，过滤了不可选时间。

![20190724095123578.png][]![2019072409514356.png][]

这里使用的是iview的DatePicker组件，type为datetime

日期不可选通过options属性来控制， 时间不可选通过time-picker-options属性来控制

代码示例如下,可copy到iview这里运行查看效果：[https://run.iviewui.com/S10Xjfll][https_run.iviewui.com_S10Xjfll]

<template>
       
        <br>
        <DatePicker v-modal="time" :options="options3" :time-picker-options="{steps: [1,60],disabledHours: disabledHours,hideDisabledOptions:true}" type="datetime" format="yyyy-MM-dd HH:mm":editable="false" placeholder style="width: 200px"></DatePicker>
        <br>   
    
    </template>
    <script>
        export default {
            data(){
              return {
                steps: [1, 60],//下拉列表的时间间隔，数组的三项分别对应小时、分钟、秒。例如设置为 [1, 15] 时，分钟会显示：00、15、30、45。我这里只让选择整点，所以分钟间隔设置为60
                disabledHours: [0,1,2],
                ableDates:[],
                options3: {
                 disabledDate :(date)=> {
                   //这里写上自己的逻辑，返回true，表示当前日期需要设置为不可选
                     var disabled=true;
                     if (date.getTime()>=this.ableDates[0] && date.getTime()<=this.ableDates[this.ableDates.length-1]) {
                         disabled=false;
                     }
                     return disabled;
                  }
             },
                 disabled: false,
                time:''            
    
              }
            },
           mounted () {
             this.getDisabledHours();
             this.getAbledDates();
           },
           methods: {
              getDisabledHours(){
                //实际逻辑，是调接口获得能显示的时间点list,再算出需要设置为不可选的时间点，这里写死数组数据
                 let array = [0,1,2,3,4,5,20,21,22,23];                  
    
                 this.disabledHours=array;    
             },
             getAbledDates(){
                //实际逻辑，是调接口获得能显示的日期list,这里写死数组数据
               let res=[1563811200000,1563897600000,1564070400000,1564156800000];
               
                            for (let i = 0; i < res.length; i++) {
                                var dateUnix=res[i];
                                var date=new Date(dateUnix);
                                this.ableDates.push(date);
                            }
                        
             }
           }
        }
    </script>

[20190724095123578.png]: https://img-blog.csdnimg.cn/20190724095123578.png
[2019072409514356.png]: /images/20211126/1cac9f39efe94617a2ce037e966a3741.png
[https_run.iviewui.com_S10Xjfll]: https://run.iviewui.com/S10Xjfll