Scroll to current date when opening md-calender

Question

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?

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.

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.

Code pen example: https://codepen.io/adam-wiman/pen/QKqRzd <md-calendar>

score 1 · Accepted Answer · answered Aug 12 '18 at 05:38

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.

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.

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

Scroll to current date when opening md-calender

1 Answers1

Linked