Question

如果我更改了第一个日期选择器，我试图设置第二个日期选择器的最小值，但是我做不到：

我有两个日期选择器

<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

但没有做任何更改，也没有显示任何错误，我不知道如何更新该值，请提供任何帮助，谢谢

更新：我可以看到的行为是最小值已更新，但datepicker直到我在子datepicker中选择某个值然后刷新后才出现，我需要找到一种方法来更新datepicker随时随地的最低价值。

更新：这是带有示例的stackblitz网址：

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

我想要的是选择第一个日期选择器，然后在第二个日期选择器中设置最小日期，但是当我选择第一个日期选择器时，它只会更新下一个日期选择器，因为我是动态创建的，谢谢，如果您能告诉我一些信息的方法。

Answer 1

查看源代码时，我们可以看到MatDatepickerInput没有实现OnChanges生命周期挂钩，并且min @Input映射到了一个吸气剂，它调用this._validatorOnChange，但该功能设置为() => {}。

然后，您观察到的行为是正常的，该控件并非旨在动态更改min值。如果您要添加该功能，建议您在GitHub上打开一个问题。

Answer 2

这个问题很旧，但是我遇到了同样的问题，我设法使它像这样

基本上，您需要确定更改，因为Angular Components使用SegmentEntity(name = "nameValue",rideRelatedId = 1 ,speed ="speedValue")

dynamic-form-question.component

OnPush

这里是可工作的堆栈Example

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

2 个答案: