angularangular-materialmat-datepicker

Date Picker dates wrongly displaying for Jan/1998

I am using mat-datepicker in my angular version 12 project. The data picker calender view is displaying wrong dates for the month of Jan-1998.

The 1st of Jan-1998 is starting on Thursday, but it is showing on Sunday. Only 3 days are wrongly displayed.

Here is the form-field

   <mat-form-field appearance="outline" fxFlex="100" fxFlex.gt-sm="15" fxFlex.sm="50" class="p-1">
                            <mat-label>Date of birth</mat-label>
                            <input   matInput formControlName="HPM_DOB"  required [matDatepicker]="picker">
                            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                            <mat-datepicker   #picker></mat-datepicker>
                          </mat-form-field>

Am I missing some parameters? Please guide

Please see the attached picture

Solution

  • I have solved it. Its due to css. In one of my component I am hiding month label of mat-calander. After that we removed that mat-calander control and I forgot this css added. It looks like mat-calander and mat-datepicker are using same css class names.

    ::ng-deep .mat-calendar-body-label{
     display:  none;
}