Material: md-datepicker : calendar does not scroll automaticaly on selected date

[xavierlefevre]

Hello everyone, I'm facing an issue and would love to have your help:

Actual Behavior:

• Issue : When using datepicker and setting its ng-model to currently new Date() then clicking on the datepicker to show the calendar, the calendar does not position itself automatically to the current date, but to the beginning of the date range
• Expected behavior : On the example on Angular Material website, the selected date is directly located and displayed in the calendar of the datepicker

Context:

• We develop a data visualization app mainly composed of tables using angular-material, angular-material-data-table and angular-fixed-table-header

Code:

• The exemple is extremely simple, on a new route in our application (in jade here): md-datepicker(name="dateField" ng-model="myDate")

Angular Versions:

• Angular Version: 1.5.8
• Angular Material Version: 1.1.1

Additional Information:

• Browser Type: Firefox & Chrome
• Browser Version: 44.0.2 & 54.0
• OS: MacOS 10.12

Thank you for your help !

[crisbeto]

Can you post a minimal demo that shows the issue? Otherwise it's hard to pinpoint it.

[rexhxiao]

+1 I have same issue

[Fedwar]

Yep= ( and I have same issue

[PabloL007]

Currently, it seems to scroll to the month after the one which is currently selected, or at least that's what I'm seeing.

[aider]

When squeeze height, datepicker is not scroll automaticaly to selected date

[aider]

the demo: http://plnkr.co/edit/ASePTnDhlpzqBXjohsEn?p=preview

[topherfangio]

@aider Thanks for the demo. Can definitely reproduce. I had to shrink my window to make it short enough, but I definitely see it.

[alanssoares]

I believe that problem is related to these two methods in Datepicker.js module:

CalendarCtrl.prototype.setCurrentView = function(newView, time) ...
CalendarCtrl.prototype.focus = function(date) ...

Apparently, they are used to focus the selected date in Calendar using the field displayDate, but there's not the same code for DatePicker. Using Calendar the date selected is focused without no problem.

[amoljv]

@alanssoares Checked both the methods. I found out the issue occurred inside the below method of CalendarMonthBodyCtrl.

CalendarMonthBodyCtrl.prototype.generateContent =function() {
..
}

Commenting the below line fixed the issue for me:

//this.focusAfterAppend.focus();

[dimitrivalax]

@amoljv it works :)

Thanks a lot !

[nil4you]

facing same issue @amoljv solution works. please thing to merge it.

[zofskeez]

@amoljv thanks for this! Was pulling out my hair trying to find a solution.

[Splaktar]

https://github.com/angular/material/pull/11054 was submitted to fix this but it was not targeted at the master branch, it didn't follow the commit guidelines, and it has extra commits included in the PR that were not relevant.

It would be great if someone could submit a new PR that addresses these issues and deletes the line instead of commenting it out.

[Splaktar]

Actually, I just updated the Plunker to AngularJS Material 1.1.5 and this issue appears to have been fixed already. I can reproduce the issue with 1.1.1, but not with 1.1.5.

If you can reproduce this on 1.1.5 or HEAD, please create a new issue with a CodePen or Plunker that demonstrates the issue.