ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-12-11 01:00:07  阅读:291  来源: 互联网

标签:阈值 getTime current item 日期 num startTime endTime 选择器


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

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

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

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

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

标签:阈值,getTime,current,item,日期,num,startTime,endTime,选择器
来源: https://www.cnblogs.com/fangdongdemao/p/15674421.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有