Angular 13 Material Datepicker does not apply styles properly-CodePudding

I've been trying to learn how to use angular 13 datepicker and I can't understand what is not working properly.

Here is my main module.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
  AppRoutingModule,
    BrowserModule,
    HttpClientModule,
    ...
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatFormFieldModule,
    MatInputModule
  ],
  providers: [
    MatDatepickerModule,
    MatNativeDateModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

This is the code that I used, based on this tutorial :

<input [matDatepicker]="myDatepicker">
<mat-datepicker-toggle [for]="myDatepicker"></mat-datepicker-toggle>
<mat-datepicker #myDatepicker></mat-datepicker>

And this is how it looks like: 1

And I don't really understand what I am missing and why it doesn't look like it is supposed to.

Thanks!

CodePudding user response：

Can you check if angular material is installed correctly with all the css stuff? Check your styles.css if the angular material stuff was added. Do you have @angular/core in your package.json file?

Another thing you can check is if your datepicker is wrapped by a mat-form-field. It should look like this:

<mat-form-field appearance="fill">
  <input matInput [matDatepicker]="myDatepicker">
  <mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
  <mat-datepicker #myDatepicker ></mat-datepicker>
</mat-form-field>

CodePudding user response：

You need to import the theme you want to use within your material components.

For example you can use

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

for your global css.

Had the the problem once, too. --> Angular 5 Material 2: Datepickerstyle

More infos about the Prebuild themes --> https://v6.material.angular.io/guide/theming#using-a-pre-built-theme