I am attempting to utilize a MatDatePicker in my project, but I keep encountering some unusual errors that are visible in the console (Screenshots provided below). It seems like I am unable to open the date picker.
Below is the relevant code for reference:
App Module
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatIconModule,
MatButtonModule,
FlexLayoutModule,
MatDatepickerModule,
MatInputModule,
FormsModule,
ReactiveFormsModule,
MatNativeDateModule,
],
providers: [MatDatepickerModule, MatNativeDateModule],
bootstrap: [AppComponent],
})
App Component
export class AppComponent {
// Default start date set to today
myDate = new FormControl(new Date());
constructor() {}
ngOnInit(): void {}
}
App Component HTML
<mat-form-field appearance="outline">
<mat-label>Select a start date</mat-label>
<input
matInput
[matDatepicker]="picker"
[formControl]="myDate"
/>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-picker #picker></mat-date-picker>
</mat-form-field>
Package.json
"dependencies": {
"@angular/animations": "~13.0.0",
"@angular/cdk": "^13.0.0",
"@angular/common": "~13.0.0",
"@angular/compiler": "~13.0.0",
"@angular/core": "~13.0.0",
"@angular/elements": "^13.0.0",
"@angular/flex-layout": "^12.0.0-beta.35",
"@angular/forms": "~13.0.0",
"@angular/material": "^13.0.0",
"@angular/platform-browser": "~13.0.0",
"@angular/platform-browser-dynamic": "~13.0.0",
"@angular/router": "~13.0.0",
"document-register-element": "^1.7.2",
"rxjs": "~6.6.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
The page is rendering without any issues,
Correctly rendered field can be viewed here
However, despite the correct rendering of elements, the console still displays errors as mentioned earlier. Additionally, clicking on the date picker toggle triggers another error:
Error: datepicker.open not a function
I'm unsure where I might have gone wrong with this setup. Any insights or suggestions would be greatly appreciated.