datepicker: 1.1.23 does not work with $mdDateLocaleProvider

[froque]

Bug, enhancement request, or proposal

Demo and steps to reproduce the issue

Demo URL (required)*:

• Angular 1.1.22 - datepicker & mdDateLocaleProvider
• Angular 1.1.23 - datepicker & mdDateLocaleProvider

Detailed Reproduction Steps

1. use a datepicker component
2. use a $mdDateLocaleProvider service with a custom date format

Explain the expected behavior

Datepicker should work in version 1.1.23 with custom date formats. The behavior should be the same as in version 1.1.22

Explain the current behavior

The user can't select a date from the date picker. Errors are show in the console view.

Discuss the use-case or motivation for changing the existing behavior

List the affected versions of AngularJS, Material, OS, and browsers

• AngularJS Material: 1.1.23
• Browsers: Chromium, Firefox

Add anything else we should know

Stack Trace

TypeError: Cannot read property 'getTime' of null
    at Object.ngModelCtrl.$render (angular-material.js:14743)
    at Object.$processModelValue (angular.js:31125)
    at Object.$$setModelValue (angular.js:31152)
    at ngModelWatch (angular.js:31191)
    at Scope.$digest (angular.js:19200)
    at Scope.$apply (angular.js:19568)
    at HTMLButtonElement.<anonymous> (angular.js:29023)
    at defaultHandlerWrapper (angular.js:3891)
    at HTMLButtonElement.eventHandler (angular.js:3879)
(anonymous) @ angular.js:15635
(anonymous) @ angular.js:11914
$digest @ angular.js:19226
$apply @ angular.js:19568
(anonymous) @ angular.js:29023
defaultHandlerWrapper @ angular.js:3891
eventHandler @ angular.js:3879
angular.js:15635 TypeError: Cannot read property 'getTime' of null
    at Object.ngModelCtrl.$render (angular-material.js:14743)
    at CalendarMonthCtrl.initialize (angular-material.js:15138)
    at Object.link (angular-material.js:15047)
    at angular.js:1391
    at invokeLinkFn (angular.js:11334)
    at nodeLinkFn (angular.js:10653)
    at compositeLinkFn (angular.js:9900)
    at publicLinkFn (angular.js:9765)
    at lazyCompilation (angular.js:10179)
    at boundTranscludeFn (angular.js:9943) "<md-calendar-month ng-switch-default="" class="ng-scope">"
(anonymous) @ angular.js:15635
(anonymous) @ angular.js:11914
invokeLinkFn @ angular.js:11336
nodeLinkFn @ angular.js:10653
compositeLinkFn @ angular.js:9900
publicLinkFn @ angular.js:9765
lazyCompilation @ angular.js:10179
boundTranscludeFn @ angular.js:9943
controllersBoundTransclude @ angular.js:10703
(anonymous) @ angular.js:34679
forEach @ angular.js:388
ngSwitchWatchAction @ angular.js:34678
$digest @ angular.js:19208
$apply @ angular.js:19568
(anonymous) @ angular.js:29023
defaultHandlerWrapper @ angular.js:3891
eventHandler @ angular.js:3879
angular.js:15635 TypeError: Cannot read property 'getTime' of null
    at Object.ngModelCtrl.$render (angular-material.js:14743)
    at CalendarCtrl.setNgModelValue (angular-material.js:14778)
    at angular-material.js:15096
    at Scope.$eval (angular.js:19461)
    at Scope.$apply (angular.js:19560)
    at HTMLTableCellElement.CalendarMonthCtrl.cellClickHandler (angular-material.js:15095)

Screenshots

[schipa]

The demo is not working where $mdDateLocaleProvider.parseDate is used. In v1.1.23 it doesn't show the calendar on opening.

angular.js:15635 TypeError: e.getFullYear is not a function
    at n.getDateId (angular-material.min.js:7)
    at n.changeSelectedDate (angular-material.min.js:7)
    at angular-material.min.js:7
    at m.$broadcast (angular.js:19788)
    at Object.e.$render (angular-material.min.js:7)
    at t.initialize (angular-material.min.js:7)
    at Object.link (angular-material.min.js:7)
    at angular.js:1391
    at Ca (angular.js:11334)
    at p (angular.js:10653)
(anonymous) @ angular.js:15447
angular.js:15635 TypeError: t.getDate is not a function
    at Object.isSameDay (angular-material.min.js:7)
    at fe.buildDateCell (angular-material.min.js:7)
    at fe.buildCalendarForMonth (angular-material.min.js:7)
    at fe.generateContent (angular-material.min.js:7)
    at angular-material.min.js:7
    at b.$digest (angular.js:19208)
    at i.updateBlock_ (angular-material.min.js:7)
    at i.virtualRepeatUpdate_ (angular-material.min.js:7)
    at i.containerUpdated (angular-material.min.js:7)
    at t.updateSize (angular-material.min.js:7)
(anonymous) @ angular.js:15447
angular-material.min.js:7 Uncaught TypeError: t.getFullYear is not a function
    at Object.getMonthDistance (angular-material.min.js:7)
    at t.getSelectedMonthIndex (angular-material.min.js:7)
    at fn (eval at compile (angular.min.js:1), <anonymous>:4:198)
    at m.$eval (angular.js:19461)
    at i.virtualRepeatUpdate_ (angular-material.min.js:7)
    at i.containerUpdated (angular-material.min.js:7)
    at t.updateSize (angular-material.min.js:7)
    at angular.js:1392
    at t.<anonymous> (angular-material.min.js:7)
    at angular.js:1391

---

Here's what I found out so far:

$mdDateLocaleProvider.parseDate is called with dates in YYYY-MM-DD format. Moment's L won't match that.

Adding YYYY-MM-DD to moment(...) will solve the calendar not showing on opening...

$mdDateLocaleProvider.parseDate = function (dateString) {
  var m = moment(dateString, ['L', 'YYYY-MM-DD'], true);
  return m.isValid() ? m.toDate() : new Date(NaN);
};

but you can't select a date. It will be invalid because this time $mdDateLocaleProvider.parseDate is called with the timestamp from data-timestamp, e.g. 1592949600000 (CEST).

[Splaktar]

Thank you for the report and the extra debugging findings. It looks like our change to support specifying a timezone in ng-model-options broke the Moment demos. We're working on a resolution now.