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、有完结工夫,抉择开始工夫:

集体博客 蜗牛