md-datepicker throw exception

[adoris]

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

[donroyco]

@adoris If you are using angular/material 1.1.4 with angular/core 4.2.4, you are not using the correct setup. Please use angular/material 2.0.0-beta.7 with angular/core 4.2.4.

[kbchandiran]

@donroyco i am using angular/material 2.0.0-beta.7 with angular/core 4.2.4. but now also same issue

[jelbourn]

@mmalerba sounds like there a situation that leads to trying to call getFullYear on a null/undefined value in the native date adapter

[mmalerba]

@jelbourn I assume you didn't mean to close this?

[jelbourn]

Yeah, clicked the wrong button

[justingish]

I'm seeing the same thing, but only if I try to set a Min or Max on the input.

[mmalerba]

@adoris @justingish can one of you please provide a plunker reproduction, this plunker seems to show it working correctly: http://plnkr.co/edit/iz3QNo4mBtjGYbWfo8ZU?p=preview

[mmalerba]

Closing this as I cannot reproduce, if you are still seeing the issue feel free to provide a reproduction link and I will re-open.

[justingish]

It was user error. I was binding the input to a string, not an actual date object. I am using reactive forms, if that makes a difference.

However, I do believe there is room for improvement here because the Min and Max directives are behaving differently than the mdDatePicker. Binding to a string (eg... '2017-7-5) works just fine for the date picker control until you add a min or max directive to the control.

I have created a plunker to show the issue: http://plnkr.co/edit/Iih5lyGbLO1p5pgriWZK?p=preview

[mmalerba]

@justingish Thanks for the plunker, that does seem a little strange/inconsistent, reopening.

[andlcool]

I am also facing this error. My situation is when i bind it to a formControl in reactive forms.

Error:

<input mdInput [mdDatepicker]="deadlineDatePicker" [min]="minDate" placeholder="Choose a date" formControlName="deadline">
<button mdSuffix [mdDatepickerToggle]="deadlineDatePicker">

<md-datepicker #deadlineDatePicker>

No error:

<input mdInput [mdDatepicker]="deadlineDatePicker" [min]="minDate" placeholder="Choose a date">
<button mdSuffix [mdDatepickerToggle]="deadlineDatePicker">

<md-datepicker #deadlineDatePicker>

[adoris]

Error is still here using angular/material 2.0.0-beta.8 with angular/core 4.3.0.
'minDate', 'maxDate' and 'oe.ValidTo' are of type "Date".

[mmalerba]

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.

[justingish]

That seems like a good fix. Plus the error message is clear so it will be simple to solve for anyone who mistakenly sends in a string rather than a date.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}