Angular Material Datepicker set min programmatically

问题

I am trying to set the min value of the second datepicker if i change the first datepicker, but i can't make it:

I got these two 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>

In the component i have the following:

minDatePadre= new Date(2010, 1, 1);
maxDatePadre= new Date(2020, 0, 1);
minDateHijo= new Date(2010, 1, 1);
maxDateHijo= new Date(2020, 0, 1);

I initialize the values, that works perfect and show the max and min in every datepicker, but when i try to change the values it's not working here:

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;


    }


  }

when it match the condition i change the value of

this.minDateHijo

but is not changing nothing and doesn't show any error, i don't know how to update that value, please any help, thank's

UPDATE: The behavior i can see is that the min value is updated, but the datepicker doesn't until i select some value in the child datepicker then it refreshes, i need to find a way to update the datepicker min value on the go.

UPDATE: this is the stackblitz url with the example:

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

what i want is to choose first datepicker and then set the min date in the second datepicker, but when i choose the first datepicker it only updates him not the next, because i create it dynamically, thanks if you can tell me some way to do it.

回答1:

When looking at the source code, we can see that the MatDatepickerInput does not implement the OnChanges lifecycle hook, and that the min @Input is mapped to a getter, that calls the this._validatorOnChange, but that function is set to () => {}.

Then, the behavior you observe is normal, this control is not designed to dynamically change the min value. I suggest you open an issue on GitHub if you want that feature added.

来源：https://stackoverflow.com/questions/54817432/angular-material-datepicker-set-min-programmatically

标签

angular

angular-material