关于java:配置ngzerro的nzdatepicker时间选择组件

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

集体博客 蜗牛