The md-datepicker element from Angular Material is opening at the wrong calendar position (eg a month or two in the future) from the default date, when viewed in Chrome. Similarly, if the years view is selected it opens a year or two from the default date.
This post (Angular material datepicker position is wrong except on Chrome) asks the reverse of this question, strangely, saying that it works in Chrome but is broken in OTHER browsers. Responses to that question indicate that it has been fixed for FireFox, IE and Safari.
Tested on both Chrome desktop and Android with same (broken) result.
Here are two separate Codepen repositories showing the problem.
http://codepen.io/anon/pen/pjGPGZ?editors=101
http://codepen.io/DionOrr/pen/pNmQzb
Code from the second link is:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<body ng-app="myApp">
<div ng-controller="myController">
<p>Inside md-input-container
<br>
<md-input-container>
<label>Test datepicker</label>
<md-datepicker ng-model="testdate1" md-placeholder="Enter date"></md-datepicker>
</md-input-container>
<br>
<md-input-container>
<label>Test datepicker</label>
<md-datepicker ng-model="testdate2" md-placeholder="Enter date"></md-datepicker>
</md-input-container>
<br>
<md-input-container>
<label>Test datepicker</label>
<md-datepicker ng-model="testdate3" md-placeholder="Enter date"></md-datepicker>
</md-input-container>
<br>
<md-input-container>
<label>Test datepicker</label>
<md-datepicker ng-model="testdate4" md-placeholder="Enter date"></md-datepicker>
</md-input-container>
<br>
<md-input-container>
<label>Test datepicker</label>
<md-datepicker ng-model="testdate5" md-placeholder="Enter date"></md-datepicker>
</md-input-container>
<br>
<md-input-container>
<label>Test datepicker</label>
<md-datepicker ng-model="testdate6" md-placeholder="Enter date"></md-datepicker>
</md-input-container>
<br>
<md-input-container>
<label>Test datepicker</label>
<md-datepicker ng-model="testdate7" md-placeholder="Enter date"></md-datepicker>
</md-input-container>
<br>
<md-input-container>
<label>Test datepicker</label>
<md-datepicker ng-model="testdate8" md-placeholder="Enter date"></md-datepicker>
</md-input-container>
</p>
<p>Not inside md-input-container
<br>
<md-datepicker ng-model="testdate9" md-placeholder="Enter date"></md-datepicker>
<br>
<md-datepicker ng-model="testdate10" md-placeholder="Enter date"></md-datepicker>
<br>
<md-datepicker ng-model="testdate11" md-placeholder="Enter date"></md-datepicker>
<br>
<md-datepicker ng-model="testdate12" md-placeholder="Enter date"></md-datepicker>
<br>
<md-datepicker ng-model="testdate13" md-placeholder="Enter date"></md-datepicker>
<br>
<md-datepicker ng-model="testdate14" md-placeholder="Enter date"></md-datepicker>
<br>
<md-datepicker ng-model="testdate15" md-placeholder="Enter date"></md-datepicker>
<br>
<md-datepicker ng-model="testdate16" md-placeholder="Enter date"></md-datepicker>
</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-animate.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-aria.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-messages.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js" type="text/javascript"></script>
<script type="text/javascript">
var app = angular.module('myApp', ['ngMaterial', 'ngMessages']);
app.controller('myController', function($scope) {
$scope.testdate1 = new Date();
$scope.testdate2 = new Date();
$scope.testdate3 = new Date();
$scope.testdate4 = new Date();
$scope.testdate5 = new Date();
$scope.testdate6 = new Date();
$scope.testdate7 = new Date();
$scope.testdate8 = new Date();
$scope.testdate9 = new Date();
$scope.testdate10 = new Date();
$scope.testdate11 = new Date();
$scope.testdate12 = new Date();
$scope.testdate13 = new Date();
$scope.testdate14 = new Date();
$scope.testdate15 = new Date();
$scope.testdate16 = new Date();
});
</script>
Please open them on Chrome (either desktop or mobile), particularly trying the datepickers lower down the page.
This question (github.com/angular/material/issues/5055) alludes to a similar problem with the Angular Material datepicker and attributes it to being incorrectly placed in an md-input-container. But the second codepen link above specifically shows that the problem recurs whether or not the datepicker is inside a md-input-container, thus ruling out that answer in this case.
Is there a simple fix?
