md-datepicker throw exception
See original GitHub issueWhat is the issue? *
md-datepicker directive, angilar/core 4.2.4, angular/material 1.1.4
when open the month view,it throw error.
same error from angular 1.5: https://github.com/angular/material/issues/10627
Details:
when you open the day view,you can select a month,and then you will open the month view,you will see nothing. And you open the developer tool,you will see the exception message.
HTML
<md-input-container>
<label for="ValidFrom">Gültig bis:</label>
<input mdInput name="ValidTo" [mdDatepicker]="validToDatePicker" [min]="minDate" [max]="maxDate" [(ngModel)]="oe.ValidTo">
<button mdSuffix [mdDatepickerToggle]="validToDatePicker"></button>
</md-input-container>
<md-datepicker #validToDatePicker md-placeholder="Gültig bis" class="field-input full-width"></md-datepicker>
ERROR
Error: Uncaught (in promise): TypeError: date.getFullYear is not a function
TypeError: date.getFullYear is not a function
at NativeDateAdapter.webpackJsonp.../../../material/@angular/material.es5.js.NativeDateAdapter.getYear (http://localhost:4200/vendor.bundle.js:97255:21)
at NativeDateAdapter.webpackJsonp.../../../material/@angular/material.es5.js.DateAdapter.compareDate (http://localhost:4200/vendor.bundle.js:97168:43)
at MdDatepickerInput._minValidator (http://localhost:4200/vendor.bundle.js:112974:36)
at http://localhost:4200/vendor.bundle.js:83175:49
at Array.map (native)
at _executeValidators (http://localhost:4200/vendor.bundle.js:83175:23)
at MdDatepickerInput._validator (http://localhost:4200/vendor.bundle.js:83131:33)
at MdDatepickerInput.webpackJsonp.../../../material/@angular/material.es5.js.MdDatepickerInput.validate (http://localhost:4200/vendor.bundle.js:113140:39)
at http://localhost:4200/vendor.bundle.js:83423:52
at http://localhost:4200/vendor.bundle.js:83175:49
at NativeDateAdapter.webpackJsonp.../../../material/@angular/material.es5.js.NativeDateAdapter.getYear (http://localhost:4200/vendor.bundle.js:97255:21)
at NativeDateAdapter.webpackJsonp.../../../material/@angular/material.es5.js.DateAdapter.compareDate (http://localhost:4200/vendor.bundle.js:97168:43)
at MdDatepickerInput._minValidator (http://localhost:4200/vendor.bundle.js:112974:36)
at http://localhost:4200/vendor.bundle.js:83175:49
at Array.map (native)
at _executeValidators (http://localhost:4200/vendor.bundle.js:83175:23)
at MdDatepickerInput._validator (http://localhost:4200/vendor.bundle.js:83131:33)
at MdDatepickerInput.webpackJsonp.../../../material/@angular/material.es5.js.MdDatepickerInput.validate (http://localhost:4200/vendor.bundle.js:113140:39)
at http://localhost:4200/vendor.bundle.js:83423:52
at http://localhost:4200/vendor.bundle.js:83175:49
at resolvePromise (http://localhost:4200/polyfills.bundle.js:6315:31)
at http://localhost:4200/polyfills.bundle.js:6366:17
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:5969:31)
at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:71783:37)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:5968:36)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (http://localhost:4200/polyfills.bundle.js:5736:47)
at drainMicroTaskQueue (http://localhost:4200/polyfills.bundle.js:6129:35)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:4200/polyfills.bundle.js:6035:25)
tested on:
Win10, Chrome 59.0.3071.115
Win10, IE11
Win10, Firefox 54.0
Issue Analytics
- State:
- Created 6 years ago
- Comments:15 (8 by maintainers)
Top Results From Across the Web
Angular Material md-datepicker throws error when clicked
I was able to update and add without any problems until I added the md-datepicker. I got the following error when I clicked...
Read more >Set Datepicker to null / empty throws error? - MDBootstrap
The error is probably caused by the second date picker component that you added to the template. You need to create both input...
Read more >Directives - - - md-input-container - AngularJS Material
Exception : Hidden inputs ( <input type="hidden" /> ) are ignored and will not throw an error, so you may combine these with...
Read more >Tutorial by Examples: c | RIP Tutorial
This example shows how to catch custom Exception class CustomError(Exception): pass try: raise CustomError('Can you catch me ?') except CustomError as e: print ......
Read more >Datepicker - Angular Material
This error is thrown if more than one <input> tries to claim ownership over the same <mat-datepicker> (via the matDatepicker attribute on the...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I am also facing this error. My situation is when i bind it to a formControl in reactive forms.
Error: <md-input-container> <input mdInput [mdDatepicker]=“deadlineDatePicker” [min]=“minDate” placeholder=“Choose a date” formControlName=“deadline”> <button mdSuffix [mdDatepickerToggle]=“deadlineDatePicker”></button> </md-input-container> <md-datepicker #deadlineDatePicker></md-datepicker>
No error: <md-input-container> <input mdInput [mdDatepicker]=“deadlineDatePicker” [min]=“minDate” placeholder=“Choose a date”> <button mdSuffix [mdDatepickerToggle]=“deadlineDatePicker”></button> </md-input-container> <md-datepicker #deadlineDatePicker></md-datepicker>
I have a PR open to make the behavior more consistent by also throwing errors when developers attempt to set the value to type other than the type expected by the
DateAdapter
. In the case of theNatvieDateAdapter
this means strings will no longer be considered valid (this is error prone since the way that string is parsed may vary depending on locale). After #5711 lands you will need to make sure you’re working with actualDate
objects if you want to use theNativeDateAdapter
.