Question

目前正在使用角度材质构建应用，我们需要一个md-calendar组件。我们想要自定义按钮样式和内容，因此不要使用普通的md-datepicker。问题是当打开md-calender时，滚动位置是1933年。当前日期是正确设置的。

如何将滚动位置设置为当前日期？

md-datepicker使用md-calender作为子组件，其中日历滚动到当前日期，因此不应该难以实现。

目前的解决方法是将md-min-date属性设置为接近当前日期的日期，但这不是一个好的解决方案，因为它禁止导航到更早的日期。

代码笔示例： https://codepen.io/adam-wiman/pen/QKqRzd <md-calendar>

Answer 1

首先，我会尝试升级到最新的angular material v1.1.10，这是我尝试回答此SO Answer时得到的解决方案，但是尽管可以升级到最新版本，但这样做并没有帮助您解决问题，如果您想摆脱一些错误。

无论如何，问题是由于md-datepicker的初始化不正确，可能有多种原因，我为您解决的问题的解决方案是使用旧的可信赖的ng-if来重新初始化md-calendar，这样做可以解决此问题。

注意：使用ng-if将创建一个隔离的范围，因此$scope变量可能无法正确更新，在这些情况下，您需要使用$parent属性来解决请参阅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时滚动到当前日期

1 个答案: