gpt4 book ai didi

Angular Material Datepicker 以编程方式设置最小值

转载 作者:行者123 更新时间:2023-12-02 20:05:35 27 4
gpt4 key购买 nike

如果我更改第一个日期选择器,我试图设置第二个日期选择器的最小值,但我无法做到:

我有这两个日期选择器

<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 网址:

https://stackblitz.com/edit/angular-szjuq1

我想要的是选择第一个日期选择器,然后在第二个日期选择器中设置最小日期,但是当我选择第一个日期选择器时,它只更新他而不是下一个,因为我动态创建它,谢谢,如果你能告诉我一些方法来做到这一点。

最佳答案

查看源代码,我们可以看到MatDatepickerInput不实现 OnChanges 生命周期 Hook ,并且 min @Input 映射到 getter,调用 this._validatorOnChange ,但该函数设置为 () => {}

那么,您观察到的行为是正常的,该控件并非设计用于动态更改 min 值。如果您想添加该功能,我建议您在 GitHub 上打开一个问题。

编辑:

功能请求已提交,修复已在主分支上提交,因此应该在最新版本中可用:https://github.com/angular/components/issues/19907

关于Angular Material Datepicker 以编程方式设置最小值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54817432/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com