CODEWITHSUNDEEP
angular-materialangular6
Umberto
Umberto

Reputation: 184

Angular 6 and angular material, datepicker not work

I'm using electron with angular 6 and angular material here the dependencies of the project:

"dependencies": {
"@angular/animations": "^6.1.2",
"@angular/cdk": "^6.4.4",
"@angular/flex-layout": "^6.0.0-beta.17",
"@angular/material": "^6.4.4",
"hammerjs": "^2.0.8"
 },"devDependencies": {
"@angular-devkit/build-angular": "0.6.3",
"@angular/cli": "6.1.3",
"@angular/common": "6.1.2",
"@angular/compiler": "6.1.2",
"@angular/compiler-cli": "6.1.2",
"@angular/core": "6.1.2",
"@angular/forms": "6.1.2",
"@angular/http": "6.1.2",
"@angular/language-service": "6.1.2",
"@angular/platform-browser": "6.1.2",
"@angular/platform-browser-dynamic": "6.1.2",
"@angular/router": "6.1.2",
"@ngx-translate/core": "10.0.1",
"@ngx-translate/http-loader": "3.0.1",
"@types/jasmine": "2.8.7",
"@types/jasminewd2": "2.0.3",
"@types/node": "8.9.4",
"codelyzer": "4.2.1",
"core-js": "2.5.6",
"electron": "2.0.3",
"electron-builder": "20.14.7",
"electron-reload": "1.2.2",
"jasmine-core": "3.1.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "2.0.2",
"karma-chrome-launcher": "2.2.0",
"karma-coverage-istanbul-reporter": "2.0.0",
"karma-jasmine": "1.1.2",
"karma-jasmine-html-reporter": "1.1.0",
"npm-run-all": "4.1.3",
"npx": "10.2.0",
"protractor": "5.3.2",
"rxjs": "6.2.2",
"ts-node": "6.0.3",
"tslint": "5.10.0",
"typescript": "2.9.2",
"wait-on": "2.1.0",
"webdriver-manager": "12.0.6",
"zone.js": "0.8.26"
}

my problem is related to the datepicker element, it is displayed correctly in the dom with this code:

<mat-form-field>
   <input matInput [matDatepicker]="picker" placeholder="Choose a date">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

but when I clicked on the date that I want to select I get this error in console:

zone-mix.js:388 ERROR TypeError: _co.datepicker._select is not a function
    at Object.eval [as handleEvent] (MatDatepickerContent.html:1)
    at handleEvent (core.js:10258)
    at callWithDebugContext (core.js:11351)
    at Object.debugHandleEvent [as handleEvent] (core.js:11054)
    at dispatchEvent (core.js:7717)
    at core.js:9197
    at SafeSubscriber.schedulerFn [as _next] (core.js:3567)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:195)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:133)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77)

and the date not appear in the datepicker field. What's the problem ?

Upvotes: 3

Views: 4391

Answers (1)

Drew Thompson
Drew Thompson

Reputation: 56

I just ran into this problem and resolved it with the cli command ng update @angular/material. Restarted with an ng serve and everything is working out of box.

Upvotes: 1

Related Questions