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