Reputation: 71
i have two mat dat picker input date, date publication shoud be inferior to date_saisie. How can i fix that, using min max of dat picker or custom validators? anu suggestions would be helpful
<div class="row">
<div class="col-md-3">
<div class="form-group form-black label-floating is-empty">
<label class="control-label"> Date saisie</label>
<mat-form-field >
<input matInput [matDatepicker]="lpicker" formControlName="date_saisie" id="date_saisie">
<mat-datepicker-toggle matSuffix [for]="lpicker"></mat-datepicker-toggle>
<mat-datepicker #lpicker></mat-datepicker>
</mat-form-field>
</div>
<div *ngIf="aoForm.controls['date_saisie'].hasError('required') && aoForm.controls['date_saisie'].touched ">
please enter a date saisie
</div>
</div>
<div class="col-md-3">
<div class="form-group form-black label-floating is-empty">
<label class="control-label"> Date publication</label>
<mat-form-field >
<input matInput [matDatepicker]="ppicker" formControlName="date_publication" date-compare="date_saisie" id="date_publication">
<mat-datepicker-toggle matSuffix [for]="ppicker"></mat-datepicker-toggle>
<mat-datepicker #ppicker></mat-datepicker>
</mat-form-field>
</div>
<div *ngIf="aoForm.controls['date_publication'].hasError('required') && aoForm.controls['date_publication'].touched ">
please enter a date publication
</div>
</div>
Upvotes: 0
Views: 243
Reputation: 7221
You should use [min/max] input on matDatepicker directive.
For example, if you want to enforce date_publication to be posterior to date_saisie
....
<mat-form-field >
<input matInput [min]="aoForm.values.date_saisie" [matDatepicker]="ppicker" formControlName="date_publication" date-compare="date_saisie" id="date_publication">
<mat-datepicker-toggle matSuffix [for]="ppicker"></mat-datepicker-toggle>
....
Upvotes: 1