当前位置:网站首页>配置ng

配置ng

2020-11-09 19:13:00 程序猿欧文

1、官方示例nz-date-picker

​ 官方示例中做到的效果无法满足业务查询的务求,比如:我需要先选中开始时间,然后再选择结束时间时无法选中相同日期的数据,并且即使选择“此刻”时,对应的时间也没有进行禁用

​ 说明:ng-zerro是有对应的实现的,但是在示例中相对简单,无法达到效果,本文仅仅做了自己的实现记录
file

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 disableS.........

版权声明
本文为[程序猿欧文]所创,转载请带上原文链接,感谢
https://my.oschina.net/mikeowen/blog/4710283