角度日期选择器模式未按预期显示

如何解决角度日期选择器模式未按预期显示

我正在尝试在我的应用程序中添加角度日期选择器，但日历模式没有按预期工作。我在下面解释我的代码。

admin.component.html:

<mat-form-field>
    <mat-label>Custom calender color</mat-label>
    <input matInput [matDatepicker]="picker1" autocomplete="off"  placeholder="and placeholder">
    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
    <mat-datepicker #picker1 color="primary"></mat-datepicker>
</mat-form-field>

app.module.ts：

import { browserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { browserAnimationsModule } from '@angular/platform-browser/animations';
import { AngularFontAwesomeModule } from 'angular-font-awesome';
import { NgxPopper } from 'angular-popper';
import { AgGridModule } from 'ag-grid-angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { LoginComponent } from './components/login/login.component';
import { LandingPageParentComponent } from './components/landing-page-parent/landing-page-parent.component';
import { AuthService } from './service/auth/auth.service';
import { AuthGuardService } from './service/auth/auth-guard.service';
import { JwtHelperService,JWT_OPTIONS } from '@auth0/angular-jwt';
import { ContentViewerModalComponent } from './components/content-viewer-modal/content-viewer-modal.component';
import { AdminComponent } from './components/admin/admin.component';
import {
  MatSliderModule,MatDatepickerModule,MatNativeDateModule,MatFormFieldModule,MatInputModule
} from "@angular/material";

@NgModule({
  declarations: [
    AppComponent,LoginComponent,LandingPageParentComponent,ContentViewerModalComponent,AdminComponent
  ],imports: [
    browserModule,browserAnimationsModule,AppRoutingModule,HttpClientModule,FormsModule,AngularFontAwesomeModule,NgxPopper,ReactiveFormsModule,AgGridModule.withComponents([]),MatSliderModule,MatInputModule

  ],entryComponents: [
    ContentViewerModalComponent
  ],providers: [
    AuthService,AuthGuardService,{
      provide: JWT_OPTIONS,useValue: JWT_OPTIONS
    },JwtHelperService
  ],bootstrap: [AppComponent]
})
export class AppModule { }

在这里我添加了 angular material datepicker 并且它也能工作。但是当用户点击日历图标时，它会给出如下所示的模式。

我需要在点击图标后获得正确的日历模式。请帮我解决这个问题。