Прокрутите до текущей даты при открытии md-calender

В настоящее время мы создаем приложение с угловым материалом, где нам нужен компонент md-calendar. Мы хотим настроить стиль и содержимое кнопки и поэтому не используем обычный md-datepicker. Проблема в том, что при открытии md-календаря позиция прокрутки находится на 1933 году. Текущая дата установлена ​​​​правильно.

Как я могу установить положение прокрутки в качестве текущей даты?

md-datepicker использует md-calender в качестве подкомпонента, где календарь прокручивается до текущей даты, поэтому это не должно быть так сложно достичь.

Текущий обходной путь заключается в том, чтобы установить для свойства md-min-date дату, близкую к текущей дате, но это не очень хорошее решение, поскольку оно запрещает переход к более ранним датам.

Пример пера кода: https://codepen.io/adam-wiman/pen/QKqRzd <md-calendar>


javascript angularjs angular-material
person Adam    schedule 03.10.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Сначала я попытался перейти на последнюю версию angular material v1.1.10, которая была решением, которое я получил, пытаясь ответить на этот SO Answer, но это не помогло решить вашу проблему, хотя вы можете обновить до последней версии, если хотите избавиться от некоторых ошибок.

В любом случае, проблема связана с тем, что md-datepicker не инициализирован должным образом, для этого может быть ряд причин, мое решение вашей проблемы - использовать старый добрый надежный ng-if для повторной инициализации md-calendar, что решает эту проблему.

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.
-->

person Naren Murali    schedule 12.08.2018