关于angular:angluar中在input标签动态设置选择日期

前言

在我的项目中须要设置用户不能抉择明天以前的日期，然而每天的日期是会变的，所以须要动静地设置截至日期。

<input> 的 max 和 min 属性

max，min 属性规定 <input> 元素的最大值和最小值，也就是能够顺次来设置截止日期。

 // 抉择最大日期为 2022 年 2 月 20
1  <input type="date" max="2022-02-20">

  // 抉择最小日期为 2022 年 2 月 18
2  <input type="date"  min="2022-02-18">

 //  日期为两者两头
3  <input type="date" min="2022-02-18" max="2022-02-20">

所以只有在组件初始化时获取当初的工夫戳，转换成 yyyy-MM-dd 的格局就能实现。
另外留神月份的如果小于 10，如果不写后面的 0 会设置失败。

设置截至日期

首先获取当初的工夫戳，angular 中能够间接应用 new Date().valueOf()获取。

 // 获取以后工夫戳
 const nowDateTime = new Date().valueOf();

获取到工夫戳后有以下几种解决形式。

办法一: 用 angular 内置管道

1  <input class="form-control" type="date" id="date"
2        max = "{{nowDateTime | date:'yyyy-MM-dd'}}"
3       [formControl]="formControl" >

应用 angular 自带的管道间接将工夫戳转换成 yyyy-MM-dd 格局，

办法二: 利用 document.getElementById

      // 获取以后工夫戳
1     this.nowDateTime = new Date().valueOf();
      // 将工夫戳转换为 yyyy-MM-dd 格局
2     this.maxTime = this.getTime(this.nowDateTime);
      // 利用 document.getElementById 获取到相应的 input 的标签
3     const inputElement = document.getElementById('date');
      // 设置最大日期
4     inputElement.setAttribute('max', this.maxTime);

这种办法能够间接在 c 层设置 input 的属性，不必在 v 层手动增加 max 属性。
然而须要手动将工夫戳转换成 yyyy-MM-dd 格局。能够参考一下转换代码。

/**
   * 把工夫戳转化为 y-m-r 模式
   * @param timeStamp 工夫戳
   */
  getTime(timeStamp: number): string {const date = new Date(timeStamp);
    const year = date.getFullYear().toString();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    return year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
  }

办法三: 用 [max] 或[attr.max]模式增加

在 c 层获取到 yyyy-MM-dd 格局的工夫 maxTime 后，也能够手动在 input 标签这增加 [max] 或[attr.max]属性。
c 层：

      // 获取以后工夫戳
1     this.nowDateTime = new Date().valueOf();
      // 将工夫戳转换为 yyyy-MM-dd 格局
2     this.maxTime = this.getTime(this.nowDateTime);

v 层：

1  <input class="form-control" type="date" id="date"
2       [max] = "maxTime"
3       // 或者 [attr.max] = "maxTime"
4       [formControl]="formControl" >

对于 [max] 和[attr.max]

这两种绑定都是属性绑定。尽管这两种形式都能应用，然而两种一个翻译为 property，一个翻译为 attribute。工作的形式也不同。
property 绑定：[max] = "maxTime"
attribute 绑定：[attr.max] = "maxTime"

property 绑定，也就是 [max] 的模式，只能用于该标签理论存在的属性。input 标签必须存在 max 这个属性。

attribute 绑定，也就是 [attr.max] 的模式。它只是将 max 属性增加到 DOM 元素 。只是增加到 DOM 而不是由元素解决。 所以任意写一个 abcde 的名字，如[attr.abcde]，也能通过编译。只是没有起到任何作用。

对于 [max] 和 max

能够察看到第一种办法的 max 没有加中括号，第三种办法的 max 加了。

1     [max] = "maxTime"  √
2     max = "{{nowDateTime | date:'yyyy-MM-dd'}}" √
3     [max] = "'2020-01-22'"
4     max = "{{maxTime}}"
5     [max] = "{max:'2022-01-02'}"  // 仅为示例

简略来说就是 带了中括号示意前面个别习惯要跟变量 ，如 1。
不带中括号的前面个别跟定值 ，如 2。
然而实际上不这么做也能够, 如 3 和 4。
不过，只有 [] 的模式前面才能够跟对象，如 5，不加中括号会认为前面是字符串。

最终应用成果

子组件增加 @input 后，父组件就能通过设置[setMaxToday]=”true”, 来管制截止日期为明天。不设置，则性能同以前一样。

 <yz-date [formControlName]="keys.date" [setMaxToday]="true"></yz-date>

/**
   * 设置最大日期为明天(可选)
   */
  @Input()
  set setMaxToday(set: boolean) {if(set){const nowDateTime = new Date().valueOf();
    this.maxTime = this.getTime(nowDateTime);
    }
  }

题外

吐糟一下这个自带的 clear 性能。它仅仅是把 对应 formControl 的 value 值置为空字符串：’ ‘，并没有置为 null, 这就导致设置的[disabled]=”formControl.invalid” 通过了。确认按钮可能点击。

起初解决办法是：加上如下第二行，(change)能使 input 值扭转时执行函数

1    <input class="form-control" type="date" id="date"
2       (change)="dateChanged()"
3       [max] = "maxTime"
4       [formControl]="formControl" >

/**
   * 当点击 clear 时，设置 formControl 为 invalid
   */
  dateChanged(){if (!this.formControl.value){this.formControl.setValue(null);
    }