前言
依照官方例子,要给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)">生 成</button> <button class="primary-empty-btn" (click)="cancel()">取 消</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()">添 加</button> <button class="primary-empty-btn" (click)="cancel2()">关 闭</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 }
好了,就酱。