question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

md-datepicker throw exception

See original GitHub issue

What 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:closed
  • Created 6 years ago
  • Comments:15 (8 by maintainers)

github_iconTop GitHub Comments

2reactions
andlcoolcommented, Jul 15, 2017

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>

1reaction
mmalerbacommented, Jul 17, 2017

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 the NatvieDateAdapter 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 actual Date objects if you want to use the NativeDateAdapter.

Read more comments on GitHub >

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

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found