在angluar中，在input标签中动态设置选择日期

前言项目中需要设置用户不能选择今天之前的日期，但是每天的日期都会变化，所以需要deadline动态设置。的max和min属性为max，min属性指定了元素的最大值和最小值，即deadline可以依次设置。//选择最大日期为2022年2月201//选择最小日期为2022年2月182//日期在两个之间所以只要获取组件初始化时的当前时间戳,转换成yyyy-MM-dd格式即可实现。另外注意，如果月份小于10，前面不写0，会设置失败。设置结束日期，首先获取当前时间戳，在angular中可以直接使用newDate().valueOf()获取。//获取当前时间戳constnowDateTime=newDate().valueOf();获取时间戳后有几种处理方式。方法一：使用angular内置管道1使用angular自带的pipeline直接将时间戳转成yyyy-MM-dd格式，方法二：使用document.getElementById//获取当前时间戳1this.nowDateTime=newDate()。的价值（）;//将时间戳转换为yyyy-MM-dd格式2this.maxTime=this.getTime(this.nowDateTime);//使用document.getElementById获取对应的输入标签3constinputElement=document.getElementById('date');//设置最大日期4inputElement.setAttribute('max',this.maxTime);这种方法可以直接在c层设置input属性，而不需要在v层手动添加max属性。但是你需要手动将时间戳转换成yyyy-MM-dd格式。您可以参考转换代码。/***将时间戳转换为y-m-r格式*@paramtimeStamp时间戳*/getTime(timeStamp:number):string{constdate=newDate(timeStamp);constyear=date.getFullYear().toString();constmonth=date.getMonth()+1;constday=date.getDate();returnyear+'-'+(month<10?'0'+month:month)+'-'+(day<10?'0'+day:day);}方法三：以[max]或[attr.max]的形式添加在c层获取yyyy-MM-dd格式的时间maxTime后，也可以手动添加[max]或[attr.max]属性。c层：//获取当前时间戳1this.nowDateTime=newDate().valueOf();//将时间戳转换为yyyy-MM-dd格式2this.maxTime=this.getTime(this.nowDateTime);v层：1关于[max]和[attr.max]这两个绑定都是属性绑定。虽然这两种方法都可以使用，但其中一种被翻译成属性，另一种被翻译成属性。它的工作方式也不同。属性绑定：[max]="maxTime"属性绑定：[attr.max]="maxTime"属性绑定，即[max]的形式，只能用于标签中实际存在的属性。输入标签必须具有属性最大值。属性绑定，形式为[attr.max]。它只是将max属性添加到DOM元素。只是添加到DOM而不是由元素处理。所以随便写一个abcde的名字，比如[attr.abcde]，也是可以编译的。它只是没有用。关于[max]和max，可以观察到第一种方法的max没有加方括号，第三种方法的max加了。1[max]="maxTime"√2max="{{nowDateTime|date:'yyyy-MM-dd'}}"√3[max]="'2020-01-22'"4max="{{maxTime}}"5[max]="{max:'2022-01-02'}"//这只是一个例子。简单来说，就是用方括号表示，一般习惯后面跟着一个变量，比如1。没有方括号的通常后面跟着一个固定值，比如2。但其实不这样做也可以,比如3和4。但是只有[]的形式后面可以跟一个对象，比如5，没有方括号，它会被认为是一个字符串。最后，在效果子组件上加上@input后，父组件可以通过设置[setMaxToday]="true"来控制deadline为今天。如果不设置，功能与之前相同。/***将最大日期设置为今天（可选）*/@Input()setsetMaxToday(set:boolean){if(set){constnowDateTime=newDate().valueOf();this.maxTime=this.getTime(nowDateTime);}}让我们谈谈内置的清除功能。它只是将对应的formControl的值设置为一个空字符串：''，而不是null，这导致[disabled]="formControl.invalid"的设置通过。可以点击确认按钮。后来解决方案是：添加如下第二行，(change)当输入值改变时执行函数1/***点击清除时，将formControl设置为无效*/dateChanged(){if(!this.formControl.value){this.formControl.setValue(null);}