angular material calendar not showing properly - html

Question

this is the html code i wrote
<mat-form-field appearance="fill">
<mat-label>Enter a date range</mat-label>
<mat-date-range-input [rangePicker]="picker">
<input matStartDate placeholder="Start date">
<input matEndDate placeholder="End date">
</mat-date-range-input>
<mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>
styles.css
#import "~#angular/material/prebuilt-themes/deeppurple-amber.css";
app.module.ts code
note : i didnt show all the imports i wrote
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import {MatDatepickerModule} from '#angular/material/datepicker'
import {MatInputModule} from '#angular/material/input'
import {MatFormFieldModule} from '#angular/material/form-field'
import { MatNativeDateModule } from '#angular/material/core';
#NgModule({
declarations: [
AppComponent,
LoginComponent,
HeaderComponent,
FooterComponent,
LogoutComponent,
ActualteComponent,
ForumComponent,
AgendaComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule,
BrowserAnimationsModule,
MatDatepickerModule,
MatInputModule,
MatFormFieldModule,
MatNativeDateModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
this is the output
i used the code from the official angular material website and its like
this

Answer 1

I too had some issues when using the mat-date picker component from angular here's what i did
I used the same html code you posted
Added Angular material using ng add #angular/material
I had to import some more modules other than the date picker module as i encountered some errors. Here's my app.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { MatDatepickerModule } from '#angular/material/datepicker';
import { MatFormFieldModule } from '#angular/material/form-field';
import { MatInputModule } from '#angular/material/input';
import { AppComponent } from './app.component';
import { BrowserModule } from '#angular/platform-browser';
import {MatNativeDateModule} from '#angular/material/core';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserAnimationsModule,
MatNativeDateModule,
BrowserModule,
CommonModule,
MatDatepickerModule,
MatFormFieldModule,
MatInputModule,
],
exports: [
MatDatepickerModule,
MatFormFieldModule,
MatInputModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I restarted the app and ran it and it worked fine for me.
I didn't have to do the import for the deep purple theme as it showed the option to select one when adding the angular material.
My Angular version is Angular: 15.1.5 and the material version is "#angular/material": "^15.1.5",