限制选择时间控件

前言

最近刚接触的NG-ZORRO,今天小编给大家分享一下NG-ZORRO中，时间控件限制时间选择的知识。

html

 <nz-range-picker
      (click)="picker()"
      [(ngModel)]="dateValue"
      name="dateValue"
      [nzDisabledDate]="disabledDate"
      [nzDisabledTime]="disabledRangeTime"
      [nzShowTime]="{ nzHideDisabledOptions: true, nzDefaultOpenValue: timeDefaultValue }"
      nzFormat="yyyy-MM-dd HH:mm:ss"
  ></nz-range-picker>

ts

range(start: number, end: number): number[] {
        const result = [];
        for (let i = start; i < end; i++) {
            result.push(i);
        }
        return result;
    }
    disabledDate = (current: Date): boolean => {
        return differenceInCalendarDays(current, this.today) < 0;
    }

    disabledRangeTime = (value: Date[], type: 'start' | 'end'): object => {
        for (let i = 0; i < this.dateValue.length; i++) {
            // 选择日
            this.data1 = this.dateValue[0].getFullYear() + '-' + (this.dateValue[0].getMonth() + 1) + '-' + this.dateValue[0].getDate() + ' '
                + this.dateValue[0].getHours() + ':' + this.dateValue[0].getMinutes() + ':' + this.dateValue[0].getSeconds();
        }
        if (type === 'start') {
            // 选择日日期跟服务器日期相同，限制时间控件不可以选当前时间以及之前的回见
            if (this.data1.substr(0, 10) === this.time.substr(0, 10)) {
                this.hours = this.time.substr(11, 2);
                this.minutes =  this.time.substr(14, 2);
                this.seconds =  this.time.substr(17, 2);
                console.log('this.hours');
                console.log('this.minutes');
                console.log('this.seconds');
                return {
                    nzDisabledHours: () => this.range(0, 60).splice(0, this.hours),
                    nzDisabledMinutes: () => this.range(0, this.minutes),
                    nzDisabledSeconds: () => [55, this.seconds]
                };
            } else {
                return {
                    nzDisabledHours: () => this.range(0, 60).splice(0, this.hours),
                    nzDisabledMinutes: () => this.range(0, this.minutes),
                    nzDisabledSeconds: () => [55, 56]
                };
            }
        }
        return {
            nzDisabledHours: () => this.range(0, 60).splice(0, 0),
            nzDisabledMinutes: () => this.range(0, 0),
            nzDisabledSeconds: () => [55, 56]
        };
    }

/**
    * 点击日期控件获取服务器时间
    * @author 
    * @since 
 */
 
 picker() {
        const url = 'exam-web/examination/selTime';
            this.http.get(url).subscribe(
                res => {
                    if (res.json().code === ResponseCode.SUCCESSCODE) {
                        this.time = res.json().data;
                        console.log(this.time);
                        console.log(res.json());

                    } else if (res.json().code === ResponseCode.FAILCODE) {
                        this.tipMsgService.error('警告', '考试添加失败!');
                    }
              }
      );
 }

选择开始日期（2018/12/16）和结束日期（2018/12/17）

选择开开始时间和结束时间

服务器时间

大家看以上三张图，有没有发现时间控件有些时间是不可以选择的，是因为在ts中限制了开始时间不能大于当前时间，这样限制住控件不在选择范围内的时间不可编辑，很方便用户使用。