TimePicker - NG-ZORRO设置

前言

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

正文

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

html文件：

  
    

      
      

        
面试日期
        
{{item.split('年')[1]}}×
            (click)="openCalendar(calendarFormContent,calendarFormFooter)">
      
      

        

          
面试数组
          

            
            
          
        
        

          
开放场次
          

            
            
          
        
      
      
面试场次的具体时间设置
    
    

      

        

          

            
场次
            
开始时间
            
结束时间
            
具体时间
            
名额数
          
        
        

          

            
第{{i+1}}场
            

              
                [nzMinuteStep]="10" nzPlaceHolder="请选择">
            
            

              
                [nzMinuteStep]="10" nzPlaceHolder="请选择">
            
            
{{subItem}}×
            
{{item.detailTime.length}}
          
        
      
    
  

  
    生 成
    取 消
  



  
    
             [nzDisabledHours]="disabledHours" [nzDisabledMinutes]="disabledMinutes" [nzMinuteStep]="10" nzPlaceHolder="请选择">
  
  
    添 加
    关 闭
  

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
}

好了，就酱。