components: md-datepicker throw exception

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

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 15 (8 by maintainers)

Most upvoted 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>

andlcool on Jul 15, 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.

mmalerba on Jul 17, 2017