有个需求, 开始时间和结束时间的阈值为两天
想到了一个巧妙的思路, 可以同时满足这个条件
结束时间不能小于开始时间
开始时间不能大于结束时间
<nz-date-picker [nzAllowClear]="false"
nz-tooltip nzTooltipTitle="开始时间和结束时间的阈值为两天" nzTooltipPlacement="top"
nzFormat="yyyy-MM-dd HH:mm:ss" nzPlaceHolder="开始时间" formControlName="startTime"
style="height: 32px" [nzShowToday]="false" [nzShowNow]="false"
nzShowTime [nzDisabledDate]="disabledRangeStart(item.get('endTime').value)"
(ngModelChange)="clickStartChange($event,item,1)"></nz-date-picker>
<span class="yl-span">-</span>
<nz-date-picker [nzAllowClear]="false"
(ngModelChange)="clickStartChange($event,item,2)"
nz-tooltip nzTooltipTitle="开始时间和结束时间的阈值为两天" nzTooltipPlacement="top"
nzFormat="yyyy-MM-dd HH:mm:ss" nzPlaceHolder="结束时间" formControlName="endTime"
style="height: 32px" [nzShowToday]="false" [nzShowNow]="false" nzShowTime
[nzDisabledDate]="disabledRangeTime(item.get('startTime').value)"></nz-date-picker>
// 设置禁用的结束时间
disabledRangeTime(current) {
return (obj) => {
return obj.getTime() < current.getTime();
};
}
// 设置禁用的开始时间
disabledRangeStart(current) {
return (obj) => {
return obj.getTime() > current.getTime();
};
}
// num 1开始 2结束
clickStartChange($event: any, item, num: number) {
const startTime = item.get('startTime').value;
const endTime = item.get('endTime').value;
if (
num == 1 &&
startTime.getTime() < subDays(endTime, 2).getTime() - 1000
) {
item.get('endTime').setValue(addDays(startTime, 2));
}
if (
num == 2 &&
endTime.getTime() > addDays(startTime, 2).getTime() + 1000
) {
item.get('startTime').setValue(subDays(endTime, 2));
}
}