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
}

好了，就醬。