正文
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)">生 成</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
}
好了，就酱。
