Элемент md-datepicker из Angular Material открывается в неправильное положение календаря (например, месяц или два в будущем) с даты по умолчанию, если смотреть в Chrome. Аналогично, если выбран вид лет, он открывает год или два с даты по умолчанию.Угловой материал Позиция открытия печатающего устройства неверна в Chrome
Этот пост (Angular material datepicker position is wrong except on Chrome) задает обратную сторону этого вопроса, как ни странно, говоря, что он работает в Chrome, но разбит в других браузерах. Ответы на этот вопрос указывают на то, что он был исправлен для FireFox, IE и Safari.
Проведенный как на рабочем столе Chrome, так и на Android с таким же (сломанным) результатом.
Вот два отдельных хранилища Codepen, показывающие проблему.
http://codepen.io/anon/pen/pjGPGZ?editors=101
http://codepen.io/DionOrr/pen/pNmQzb
код из второго звена является:
<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 (либо настольного компьютера или мобильного телефона), в частности, пробуя datepickers нижние вниз страницы.
Этот вопрос (github.com/angular/material/issues/5055) ссылается на аналогичную проблему с дампикером углового материала и присваивает ему неправильное размещение в контейнере md-input. Но вторая кодовая ссылка выше конкретно показывает, что проблема повторяет, находится ли датапикер внутри контейнера md-input-контейнера, тем самым исключая этот ответ в этом случае.
Есть ли простое исправление?
Это отверстие в правильном положении –