TimePicker - NG-ZORRO设置

前言

依照官方例子，要给nz-time-picker组件设置某些时间范围不能选择。

正文

根据列表里设置的开始时间与结束时间，去限制弹框的时间组件选择范围。这里用到了组件的nzDisabledHours与nzDisabledMinutes属性。

html文件：

<form #setForm="ngForm">
  <ng-template #setFormContent>
    <div class="set-form">
      <input id="storeDom" [(ngModel)]="storeTableDate" name="store" hidden/>
      <dl class="clearfix">
        <dt>面试日期</dt>
        <dd><span *ngFor="let item of setDate;let i=index;">{{item.split('年')[1]}}<i (click)="delCalendar(i)">×</i></span><i class="icon-add"
            (click)="openCalendar(calendarFormContent,calendarFormFooter)"></i></dd>
      </dl>
      <div class="two-box">
        <dl class="clearfix">
          <dt>面试数组</dt>
          <dd>
            <nz-input-number nzPlaceHolder="请输入" [(ngModel)]="interviewNum" name="interviewNum" [nzMin]="1" [nzMax]="" [nzStep]="1">
            </nz-input-number>
          </dd>
        </dl>
        <dl class="clearfix">
          <dt>开放场次</dt>
          <dd>
            <nz-input-number nzPlaceHolder="请输入" [(ngModel)]="openNum" name="openNum" [nzMin]="1" [nzMax]="" [nzStep]="1" (ngModelChange)="changeOpenNum($event)">
            </nz-input-number>
          </dd>
        </dl>
      </div>
      <p>面试场次的具体时间设置</p>
    </div>
    <div class="set-table-wrap">
      <table class="table">
        <thead>
          <tr>
            <th width="50">场次</th>
            <th width="120">开始时间</th>
            <th width="120">结束时间</th>
            <th>具体时间</th>
            <th width="50">名额数</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of setTable;let i=index">
            <td>第{{i+1}}场</td>
            <td>
              <nz-time-picker [(ngModel)]="setTable[i].startTime" style="width:100%" name="startTime{{i}}" nzFormat="HH:mm"
                [nzMinuteStep]="10" nzPlaceHolder="请选择"></nz-time-picker>
            </td>
            <td>
              <nz-time-picker [(ngModel)]="setTable[i].endTime" style="width:100%" name="endTime{{i}}" nzFormat="HH:mm"
                [nzMinuteStep]="10" nzPlaceHolder="请选择"></nz-time-picker>
            </td>
            <td><span *ngFor="let subItem of setTable[i].detailTime;let j=index;">{{subItem}}<i (click)="delInterviewNum(i,j)">×</i></span><i class="icon-add" (click)="addInterviewNum(timeFormContent,timeFormFooter,i)"></i></td>
            <td>{{item.detailTime.length}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </ng-template>

  <ng-template #setFormFooter>
    <button class="primary-btn" (click)="saveSet(setForm.form)">生&nbsp;成</button>
    <button class="primary-empty-btn" (click)="cancel()">取&nbsp;消</button>
  </ng-template>
</form>
<!--时间弹框-start-->
<form #timeForm="ngForm">
  <ng-template #timeFormContent>
    <nz-time-picker [(ngModel)]="changeTime" style="width:100%" name="time" nzFormat="HH:mm"
             [nzDisabledHours]="disabledHours" [nzDisabledMinutes]="disabledMinutes" [nzMinuteStep]="10" nzPlaceHolder="请选择"></nz-time-picker>
  </ng-template>
  <ng-template #timeFormFooter>
    <button class="primary-btn" (click)="addInterviewTime()">添&nbsp;加</button>
    <button class="primary-empty-btn" (click)="cancel2()">关&nbsp;闭</button>
  </ng-template>
<!--时间弹框-end-->

ts文件：

import { Component, OnInit, TemplateRef } from '@angular/core';
import { NzModalService, NzMessageService, NzModalRef } from '../../../../zorro/ng-zorro-antd.module';
@Component({
  selector: 'app-interview-set',
  templateUrl: './interview-set.component.html',
  styleUrls: ['./interview-set.component.scss']
})
export class InterviewSetComponent implements OnInit {
  private scrollLeft;
  private scrollTop;
  private modal: NzModalRef;
  private modal2: NzModalRef;
  formValid = false;

  checkedData = [];
  //全局设置-start
  setDate = [];//面试日期
  newSetDate = [];//日历中选中的日期
  interviewNum: Number;//面试数组
  openNum: Number;//开放场次
  changeTime: Date;
  changeTimeArr = [];
  openIndex;//表格场次索引
  storeTableDate='';//存储表格某一行的值
  setTable = [];
  calendarMode = 'month';
  multipleArr = [];
  getTimeItem;
  calenderValues;

  //全局设置-end
  constructor(private messageService: NzMessageService, private modalService: NzModalService) { }

  ngOnInit() {
  }
  scrollTs(e) {
    this.scrollLeft = e.target.scrollLeft;
    this.scrollTop = e.target.scrollTop;
  }
  selectedBox(data) {
    data['checked'] = !data['checked'];
    if (data['checked']) {
      this.checkedData.push(data);
    } else {
      this.checkedData.forEach((item, index) => {
        if (item.sapId == data.sapId) this.checkedData.splice(index, 1);
      })
    }
  }
  //---全局设置-start
  openSetForm(tplContent: TemplateRef<{}>, tplFooter: TemplateRef<{}>): void {
    this.setDate = [];
    this.multipleArr = [];
    this.newSetDate = [];
    this.openNum = 1;
    this.changeTime = null;
    this.openIndex = null;
    this.setTable = [{ startTime: null, endTime: null, detailTime: [] }]
    this.modal = this.modalService.create({
      nzTitle: '全局设置',
      nzContent: tplContent,
      nzFooter: tplFooter,
      nzMaskClosable: false,
      nzClosable: true,
      nzWidth: 800,
      nzOnCancel: () => {
        this.formValid = false;
      }
    });
  }
  //打开日历
  openCalendar(tplContent: TemplateRef<{}>, tplFooter: TemplateRef<{}>): void {
    this.modal2 = this.modalService.create({
      nzTitle: '设置日期',
      nzContent: tplContent,
      nzFooter: tplFooter,
      nzMaskClosable: false,
      nzClosable: true,
      nzWidth: 600,
      nzOnCancel: () => {
        this.cancel2();
      }
    });
  }
  //选择日历
  selectedCalendar(arr): void {
    this.newSetDate = arr;
  }
  //保存日历
  saveCalendar() {
    this.setDate = [...this.newSetDate];
    this.multipleArr = [...this.newSetDate];
    this.modal2.close();
  }
  //删除面试日期
  delCalendar(i) {
    this.setDate.splice(i, 1);
    this.multipleArr = [...this.setDate];
  }
  //更改开放场次
  changeOpenNum(num) {
    this.setTable = [];
    for (let i = 0; i < num; i++) {
      let obj = { startTime: null, endTime: null, detailTime: [] }
      this.setTable.push(obj);
    }

  }
  //面试场次具体时间弹框
  addInterviewNum(tplContent: TemplateRef<{}>, tplFooter: TemplateRef<{}>, index): void {
    let startTime = this.setTable[index].startTime;
    let endTime = this.setTable[index].endTime;
    if (!startTime || !endTime) {
      this.messageService.info("第" + (index + 1) + "场的开始时间与结束时间为必填！");
    }else if(startTime.getTime()>endTime.getTime()){
      this.messageService.info("第" + (index + 1) + "场的开始时间不能大于结束时间！");
    } else {
      this.openIndex = index;
      this.changeTime = null;
      document.getElementById('storeDom')['value']= JSON.stringify(this.setTable[index]);
      this.modal2 = this.modalService.create({
        nzTitle: '设置时间',
        nzContent: tplContent,
        nzFooter: tplFooter,
        nzMaskClosable: false,
        nzClosable: true,
        nzWidth: 300
      });
    }
  }
  //选择面试场次具体时间
  addInterviewTime() {
    if (this.changeTime) {
      let tmpTime = this.changeTime.getHours() +':'+ this.changeTime.getMinutes();
      this.setTable[this.openIndex].detailTime.push(tmpTime)
    }
  }
  //删除面试场次具体时间
  delInterviewNum(i, j) {
    this.setTable[i].detailTime.splice(j, 1);
  }
  cancel() {
    this.modal.close();
  }
  cancel2() {
    this.modal2.close();
    this.multipleArr = [...this.setDate];
  }
  disabledHours(): number[] {
　　//我这里原本是想通过this.setTable[this.openIndex]对象去拿到表格里的开始时间与结束时间，无奈此this的指向已经不是InterviewSetComponent组件了，而是指向时间的组件。
　　//后面就用了比较原始的办法，打开弹窗的时候就把该对象的值赋给某个隐藏dom，然后通过这个dom去拿

    let disabledArr=[];
    let dateObj = JSON.parse(document.getElementById('storeDom')['value']);
    for(let i=0;i<24;i++){
      if(i<new Date(dateObj.startTime).getHours() || i>new Date(dateObj.endTime).getHours()) disabledArr.push(i);
    }
    return disabledArr;
  }
  disabledMinutes(hours: number): number[] {
    let disabledArr=[];
    let dateObj = JSON.parse(document.getElementById('storeDom')['value']);
    for(let i=0;i<60;i++){
      if((hours == new Date(dateObj.startTime).getHours() && i < new Date(dateObj.startTime).getMinutes()) 
          || (hours == new Date(dateObj.endTime).getHours()&& i > new Date(dateObj.endTime).getMinutes())) disabledArr.push(i);
    }
    return disabledArr;
  }
  //---全局设置-end
}

好了，就酱。