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!
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>
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