打开md-calender时滚动到当前日期 [英] Scroll to current date when opening md-calender
问题描述
当前，我们在需要md-calendar组件的情况下使用角材料构建应用.我们要自定义按钮的样式和内容，因此不要使用常规的md-datepicker.问题是，当打开md-calender时，滚动位置在1933年.当前日期已正确设置.
Currently building an app with angular material where we need a md-calendar component. We want to customize the button style and content and therefore don't use the normal md-datepicker. Problem is that when the md-calender is opened the scroll position is on 1933. The current date is correctly set.
如何将滚动位置设置为当前日期?
How can I set the scroll position to be the current date?
md-datepicker使用md-calender作为子组件，日历被滚动到当前日期，因此实现起来并不难.
The md-datepicker is using the md-calender as a subcomponent where the calendar is scrolled to the current date so should not be that hard to achieve.
当前的解决方法是将md-min-date属性设置为接近当前日期的日期，但这不是一个好的解决方案，因为它禁止导航到更早的日期.
The current work-around is to set the md-min-date property to a date close to the current date but this is not a good solution as it prohibits navigation to earlier dates.
电笔示例:
https://codepen.io/adam-wiman/pen/QKqRzd
<md-calendar>
推荐答案
首先，我尝试升级到最新的angular material v1.1.10，这是我尝试回答此问题时得到的解决方案
Wll first I tried to upgrade to the latest angular material v1.1.10 which was the solution I got when trying to answer this SO Answer, but doing this did not help solve your issue, although you can upgrade to latest, if you want to get rid of some bugs.
无论如何，问题是由于md-datepicker没有正确初始化，可能有多种原因，我为您解决的问题的解决方案是使用旧的可信任的ng-if重新初始化
Anyway, the problem is due to the md-datepicker not being properly intialized, there could be a number of reasons for that, my solution for your problem is to use the good old trusty, ng-if to reinitialize the md-calendar, doing so solves this issue.
注意:使用ng-if将创建一个隔离的作用域，因此可能存在$scope变量无法正确更新的情况，在这种情况下，您需要使用$parent属性来解决它，请参考此处.
Note: Using ng-if will create an isolated scope, thus there is a possiblity of $scopevariables not updating properly, in these scenarios, you need to use the $parent property to solve it, refer here.
angular.module('myApp',['ngMaterial']).controller('AppCtrl', function($scope) {
$scope.myDate = new Date();
$scope.minDate = new Date(
$scope.myDate.getFullYear(),
$scope.myDate.getMonth() - 2,
$scope.myDate.getDate());
});
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at https://material.angularjs.org/license.
*/
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.10/angular-material.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.10/angular-material.min.css" rel="stylesheet"/>
<body ng-app="myApp" ng-controller="AppCtrl" ng-cloak>
<md-menu>
<md-button style="text-transform: none;background-color:grey;" aria-label="Select date" ng-click="$mdMenu.open($event);tempHide=true;" ng-init="tempHide=false;">Select Date</md-button>
<md-menu-content style="overflow: hidden;" width="5" >
<md-calendar ng-model="myDate" ng-if="tempHide">
</md-calendar>
</md-menu-content>
</md-menu>
<md-menu>
<md-button style="text-transform: none;background-color:grey;" aria-label="Select date" ng-click="$mdMenu.open($event)">Select Date (using min-date)</md-button>
<md-menu-content style="overflow: hidden;" width="5" >
<md-calendar ng-model="myDate" md-min-date="minDate">
</md-calendar>
</md-menu-content>
</md-menu>
</body>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at https://material.angularjs.org/license.
-->
这篇关于打开md-calender时滚动到当前日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
