Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

datepicker: 1.1.23 does not work with $mdDateLocaleProvider #11945

Closed
froque opened this issue Jun 22, 2020 · 5 comments · Fixed by #11949 or #11951
Closed

datepicker: 1.1.23 does not work with $mdDateLocaleProvider #11945

froque opened this issue Jun 22, 2020 · 5 comments · Fixed by #11949 or #11951
Assignees
@Splaktar
Labels
has: Pull Request A PR has been created to address this issue i18n: localization This issue is related to internationalization P1: urgent Urgent issues that should be addressed in the next minor or patch release. severity: regression This issue is related to a regression
Milestone
1.1.24

Comments

@froque
Copy link

froque commented Jun 22, 2020

Bug, enhancement request, or proposal

Demo and steps to reproduce the issue

Demo URL (required)*:

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
@Splaktar Splaktar self-assigned this Jun 22, 2020
@Splaktar Splaktar added needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community P1: urgent Urgent issues that should be addressed in the next minor or patch release. severity: regression This issue is related to a regression labels Jun 22, 2020
@Splaktar Splaktar added this to the 1.1.24 milestone Jun 22, 2020
@schipa
Copy link

schipa commented Jun 24, 2020

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

mddatepicker

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
Copy link
Member

Splaktar commented Jun 28, 2020 •
edited
Loading

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.

Splaktar added a commit that referenced this issue Jun 29, 2020
@Splaktar
fix(datepicker): support ng-model-options timezone w/ Moment
64e1cbe 
- pass datepicker's `ng-model-options` on to its calendar

Fixes #11945. Fixes #10598.
@Splaktar Splaktar added has: Pull Request A PR has been created to address this issue i18n: localization This issue is related to internationalization and removed needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community labels Jun 29, 2020
@Splaktar Splaktar mentioned this issue Jun 29, 2020
Merged
3 tasks
Splaktar added a commit that referenced this issue Jun 29, 2020
@Splaktar
fix(datepicker): support ng-model-options timezone w/ Moment
cd69caa 
- fix case where datepicker's model is initially out of sync
  with the input value
- pass datepicker's `ng-model-options` on to its calendar

Fixes #11945. Fixes #10598.
Splaktar added a commit that referenced this issue Jun 29, 2020
@Splaktar
fix(datepicker): support ng-model-options timezone w/ Moment
b0fdf73 
- fix case where datepicker's model is initially out of sync
  with the input value
- add demo for `ng-model-options` timezone support
- pass datepicker's `ng-model-options` on to its calendar

Fixes #11945. Fixes #10598.
Splaktar added a commit that referenced this issue Jun 29, 2020
@Splaktar
fix(datepicker): support ng-model-options timezone w/ Moment
12562b0 
- fix case where datepicker's model is initially out of sync
  with the input value
- add demo for `ng-model-options` timezone support
- pass datepicker's `ng-model-options` on to its calendar

Fixes #11945. Fixes #10598.
@Splaktar Splaktar mentioned this issue Jun 29, 2020
Merged
3 tasks
Splaktar added a commit that referenced this issue Jun 29, 2020
@Splaktar
fix(datepicker): support ng-model-options timezone w/ Moment
e24d09c 
- fix case where datepicker's model is initially out of sync
  with the input value
- add demo for `ng-model-options` timezone support
- pass datepicker's `ng-model-options` on to its calendar

Fixes #11945. Fixes #10598.
@Splaktar
Copy link
Member

This is fixed in master. Please try out the fix (before we release it) via npm install http://github.com/angular/bower-material#master --save or updating your package.json with "angular-material": "git+ssh://git@github.com/angular/bower-material.git#master",.

If you find any issues, please report them via GitHub issues ASAP.

@schipa
Copy link

schipa commented Jun 29, 2020

It works for me. I double-checked the version: v1.1.23-master-e24d09c

@Splaktar
Copy link
Member

@schipa thank you for verifying this! 1.1.24 is now available (Google CDN coming soon).

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@Splaktar Splaktar

Labels
has: Pull Request A PR has been created to address this issue i18n: localization This issue is related to internationalization P1: urgent Urgent issues that should be addressed in the next minor or patch release. severity: regression This issue is related to a regression
Projects
None yet
Milestone
1.1.24
3 participants
@Splaktar @schipa @froque