日期选择器开始结束时间设置阈值

本文主要是介绍日期选择器开始结束时间设置阈值，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

有个需求, 开始时间和结束时间的阈值为两天

想到了一个巧妙的思路, 可以同时满足这个条件

• 结束时间不能小于开始时间

• 开始时间不能大于结束时间

 <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));
    }
  }

这篇关于日期选择器开始结束时间设置阈值的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！