How to change Angular Material DatePicker view in code

Question

I have a requirement of Month/Year selection in Angular and we are using Angular Material library.

I have included below code which is opening default view as Month, but on Month selection it is opening Day selection mode. Requirement is, once user select Month, it should open Year selection view.

<mat-form-field>
       <input matInput [matDatepicker]="TuevFaellig" name="TuevFaellig" [(ngModel)]="object.TuevFaellig">
            <mat-datepicker-toggle matSuffix [for]="TuevFaellig"></mat-datepicker-toggle>
            <mat-datepicker **startView="year"**(yearSelected)="setMonthAndYearForTuevFaellig($event, TuevFaellig)" (monthSelected)="monthSelectedForTuevFaellig($event, TuevFaellig)" #TuevFaellig>
           </mat-datepicker>
</mat-form-field>

Component

    monthSelectedForTuevFaellig(normalizedMonthAndYear: Moment, datepicker: MatDatepicker<Moment>) {
    datepicker.startView = 'multi-year';
}
  setMonthAndYearForTuevFaellig(normalizedMonthAndYear: Moment, datepicker: MatDatepicker<Moment>) {
    datepicker.close();
  }

I thought, after Month selection, if we set startView property, it would open Year mode. but no luck with this.

First I want to open Month selection, and then Year selection.

Thanks in advance.!

Answer 1

Date Picker use like this good option

<div class="input-fields">
          <mat-form-field class="min-field" appearance="outline">
            <mat-label>From Date</mat-label>
            <input matInput name="startDate" [formControl]="startDate" [min]="yesterday"
                   [(ngModel)]="promotionModelAdd.startDate" autoComplete='off'
                   [matDatepicker]="picker1" (click)="picker1.open()" required readonly>
            <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
            <mat-datepicker #picker1></mat-datepicker>
            <mat-error *ngIf="startDate.hasError('required')">Start Date cannot be empty
            </mat-error>
          </mat-form-field>
        </div>

---

        <div class="input-fields">
          <mat-form-field class="min-field" appearance="outline">
            <mat-label>To Date</mat-label>
            <input matInput name="endDate" [formControl]="endDate" [min]="yesterday"
                   [(ngModel)]="promotionModelAdd.endDate" autoComplete='off'
                   [matDatepicker]="picker2" (click)="picker2.open()" required readonly>
            <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
            <mat-datepicker #picker2></mat-datepicker>
            <mat-error *ngIf="endDate.hasError('required')">End Date cannot be empty
            </mat-error>
            <mat-error *ngIf="endDate.hasError('greaterThan')">
              End Date should be greater than or equal to Start Date
            </mat-error>
          </mat-form-field>
        </div>

Do you need validate end date > start date please use this

 static greaterThan(startControl: AbstractControl): ValidatorFn {
        return (endControl: AbstractControl): ValidationErrors | null => {
          const startDate: Date = startControl.value;
          const endDate: Date = endControl.value;
          console.log('>>>>>>>>>>>st' + startDate);
          console.log('>>>>>>>>>>>end' + endDate);
          if (!startDate || !endDate) {
            return null;
          }
          if (startDate > endDate) {
            return { greaterThan: true };
          }
          return null;
        };
      }