assia
assia

Reputation: 71

Angular material Dat picker control

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

Answers (1)

Pierre Mallet
Pierre Mallet

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

Related Questions