Блог

Я пытаюсь добавить angular datepicker в свое приложение, но модальный календарь работает не так, как ожидалось. Я объясняю свой код ниже.

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>
 

приложение.модуль.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,
    MatDatepickerModule,
    MatNativeDateModule,
    MatFormFieldModule,
    MatInputModule

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

Здесь я добавляю angular material datepicker , и это тоже работает. Но когда пользователь нажимает на значок календаря, он выдает модальный, как показано ниже.

Мне нужно получить правильный режим календаря после нажатия на значок. Пожалуйста, помогите мне решить эту проблему.