前言
在我的项目中须要设置用户不能抉择明天以前的日期，然而每天的日期是会变的，所以须要动静地设置截至日期。
<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);
}
发表回复