angular - Angular Material Datepicker 以编程方式设置最小值
问题描述
如果我更改第一个日期选择器,我正在尝试设置第二个日期选择器的最小值,但我无法做到:
我有这两个日期选择器
<mat-form-field>
<span *ngIf="item.type=='date' && item.hijoDate">
<input matInput [id]="item.key" [matDatepicker]="picker"
[min]="minDatePadre" [max]="maxDatePadre"
(dateChange)="seleccionaFecha($event, 'padre', item.hijoDate)"
readonly [placeholder]="item.label" [formControlName]="item.key">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</span>
<span *ngIf="item.type=='date' && item.padreDate">
<input matInput [id]="item.key" [matDatepicker]="picker1"
[min]="minDateHijo" [max]="maxDateHijo"
(dateChange)="seleccionaFecha($event, 'hijo', item.padreDate)"
readonly [placeholder]="item.label" [formControlName]="item.key">
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</span>
</mat-form-field>
在组件中,我有以下内容:
minDatePadre= new Date(2010, 1, 1);
maxDatePadre= new Date(2020, 0, 1);
minDateHijo= new Date(2010, 1, 1);
maxDateHijo= new Date(2020, 0, 1);
我初始化了值,它完美地工作并在每个日期选择器中显示最大值和最小值,但是当我尝试更改值时它在这里不起作用:
seleccionaFecha(event, tipo, elemento){
if(tipo == 'padre'){
let fechaHijo = this.form.controls[elemento].value;
let fechaPadre = event.value;
if(fechaPadre>fechaHijo){//SI LA FECHA INICIAL ES IGUAL
this.form.controls[elemento].setValue(fechaPadre);
}
this.minDateHijo=new Date(2019, 1, 23);
}
else if(tipo == 'hijo'){
let fechaPadre = this.form.controls[elemento].value;
let fechaHijo = event.value;
}
}
当它符合条件时,我改变了
this.minDateHijo
但没有改变什么也没有显示任何错误,我不知道如何更新该值,请帮助,谢谢
更新:我可以看到的行为是最小值已更新,但日期选择器不会,直到我在子日期选择器中选择某个值然后它刷新,我需要找到一种方法来更新日期选择器的最小值。
更新:这是带有示例的 stackblitz url:
https://stackblitz.com/edit/angular-szjuq1
我想要的是选择第一个日期选择器,然后在第二个日期选择器中设置最小日期,但是当我选择第一个日期选择器时,它只会更新他而不是下一个,因为我动态创建它,谢谢你能告诉我一些方法它。
解决方案
查看源代码时,我们可以看到MatDatepickerInput没有实现OnChanges
生命周期钩子,并且min
@Input
映射到一个 getter,它调用this._validatorOnChange
,但该函数设置为() => {}
。
然后,您观察到的行为是正常的,此控件并非旨在动态更改min
值。如果您想添加该功能,我建议您在 GitHub 上打开一个问题。
编辑:
功能请求已提交,修复已在主分支上提交,因此它应该在最新版本中可用:https ://github.com/angular/components/issues/19907
推荐阅读
- typescript - 打字稿:“数字”类型的参数不可分配给“字符串”类型的参数
- php - PHP-Websocket:socket_recv() 和 socket_getpeername() 的问题
- eclipse - 无法在 Eclipse Photon / Eclipse IDE 中安装 Glassfish 工具
- java - While 循环出现 NoSuchElementException 错误
- python - 如果您要求整数并且没有得到整数,是否有例外?
- android - 在 Android 中从 Fragment 打开 Activity
- dart - 谁能给我一个想法,将会话超时重定向到颤振的登录屏幕?
- flutter - 尽管 SingleChildScrollView 出现 Flutter 溢出异常
- c# - C#检查字符串是否存在,如果存在则显示该字符串
- python - 对 Flask 后端响应正文的获取请求为 null 且没有 cors 并且在没有 no-cors 的情况下失败