角度材料Datepicker开放位置在Chrome中是错误的 [英] Angular Material Datepicker opening position is wrong in Chrome
问题描述
在Chrome中查看时，Angular Material的md-datepicker元素会从默认日期开始处于错误的日历位置（例如，将来的一两个月）。同样，如果选择年视图，它将从默认日期开始一两年。
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.
此帖子（角度材料datepicker的位置是错误的，除了Chrome ）这个问题的相反，奇怪的是说它的工作原理在Chrome中，但在其他浏览器中已损坏。回应这个问题，表明它已修复了火狐，IE和Safari。
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.
Chrome浏览器和Android上的测试结果相同（坏）。
Tested on both Chrome desktop and Android with same (broken) result.
这里有两个独立的Codepen存储库显示问题。
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>
请在Chrome（桌面或移动设备）上打开它们，特别是尝试在页面下方的日期戳。
Please open them on Chrome (either desktop or mobile), particularly trying the datepickers lower down the page.
这个问题（github.com/angular/material/issues/5055）暗示了角度材料日期戳的类似问题，并将其归因于不正确地放置在md中 - 输入容器。但是上面的第二个代码链接具体表明，无论datedicker是否在md-input-container内，问题都会重现，从而排除了这种情况下的答案。
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?
推荐答案
成为Chrome上的一个问题。请参阅问题＃10144 。我已经提交了提取请求＃10177 来解决问题，但尚未被合并。
Yes, this seems to be an issue on Chrome. See Issue #10144. I've submitted Pull Request #10177 to fix the issue, but it has yet to be merged.
这是您的CodePen修复：基本使用已修复。
Here is your CodePen fixed: Basic Usage Fixed.
我在我的分支上添加了依赖关系：
I added a dependency on my branch:
https://rawgit.com/ppham27/material/dist/dist/angular-material.js
并将Angular版本更新为1.5.9，并使用新的样式表。
and updated the version of Angular to 1.5.9 and used the new stylesheet, too.
这是一个临时修补程序。永久性修复将需要等待拉取请求通过。我不知道有没有办法加快这个过程。
This is a temporary fix of course. A permanent fix would require waiting for the pull request to go through. I'm unsure if there is any way to speed up the process.
这篇关于角度材料Datepicker开放位置在Chrome中是错误的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
