1、官网示例nz-date-picker
官网示例中做到的成果无奈满足业务查问的务求,比方:我须要先选中开始工夫,而后再抉择完结工夫时无奈选中雷同日期的数据,并且即便抉择“此刻”时,对应的工夫也没有进行禁用
阐明:ng-zerro是有对应的实现的,然而在示例中绝对简略,无奈达到成果,本文仅仅做了本人的实现记录
2、如何实现能够抉择雷同的工夫,并且禁用不在选中工夫范畴内的工夫
如:开始工夫2020-11-09 12:12:12,完结工夫须要选中2020-11-09 12:12:12,并且小于2020-11-09 12:12:12的工夫须要禁用
html实现:
<nz-date-picker [nzDisabledTime]="disabledStartTime" [nzDisabledDate]="disabledStartDate" nzShowTime nzFormat="yyyy-MM-dd HH:mm:ss" [(ngModel)]="startValue" nzPlaceHolder="开始工夫" (ngModelChange)="onStartChange($event)" > </nz-date-picker> <nz-date-picker [nzDisabledTime]="disabledEndTime" [nzDisabledDate]="disabledEndDate" nzShowTime nzFormat="yyyy-MM-dd HH:mm:ss" [(ngModel)]="endValue" nzPlaceHolder="完结工夫" (ngModelChange)="onEndChange($event)" > </nz-date-picker>
ts实现:
// 对日期进行配置disabledStartDate = (startValue: Date): boolean => { if (!startValue || !this.endValue) { return false; } // 雷同工夫能够抉择 if (startValue.getTime() === this.endValue.getTime()){ return false; } return startValue.getTime() >= this.endValue.getTime();}disabledEndDate = (endValue: Date): boolean => { if (!endValue || !this.startValue) { return false; } if (endValue.getDate() === this.startValue.getDate()) { // 雷同日期不禁用 return false; }else{ // 雷同工夫能够抉择 return endValue.getTime() <= this.startValue.getTime(); }}// 对工夫进行禁用disabledStartTime: DisabledTimeFn = (_value: Date, type?: DisabledTimePartial) => { // 对开始工夫进行设置 if (!this.endValue){ return null; } if (!_value){ _value = this.endValue; } let disableMinutes = []; let disableSeconds = []; if (_value.getHours() < this.endValue.getHours()){ disableMinutes = []; disableSeconds = []; }else{ disableMinutes = this.range(this.endValue.getMinutes() + 1, 60); if (_value.getMinutes() < this.endValue.getMinutes()){ disableSeconds = []; }else{ disableSeconds = this.range(this.endValue.getSeconds() + 1, 60); } } return { nzDisabledHours: () => this.range(this.endValue.getHours() + 1, 24), nzDisabledMinutes: () => disableMinutes, nzDisabledSeconds: () => disableSeconds };}disabledEndTime: DisabledTimeFn = (_value: Date, type?: DisabledTimePartial) => { // 对完结工夫进行设置 if (!this.startValue){ return null; } if (!_value){ _value = this.startValue; } let disableMinutes = []; let disableSeconds = []; if (_value.getHours() > this.startValue.getHours()){ disableMinutes = []; disableSeconds = []; }else{ disableMinutes = this.range(0, this.startValue.getMinutes()); if (_value.getMinutes() > this.startValue.getMinutes()){ disableSeconds = []; }else{ disableSeconds = this.range(0, this.startValue.getSeconds()); } } return { nzDisabledHours: () => this.range(0, this.startValue.getHours()), nzDisabledMinutes: () => disableMinutes, nzDisabledSeconds: () => disableSeconds };}
3、成果:
3.1、有开始工夫,抉择完结工夫:
3.2、有完结工夫,抉择开始工夫:
集体博客 蜗牛