javascript - 打开 md-calendar 时滚动到当前日期

标签 javascript angularjs angular-material

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

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

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

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

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

最佳答案

首先我尝试升级到最新的 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.
-->

关于javascript - 打开 md-calendar 时滚动到当前日期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39828972/

相关文章:

JavaScript Swiper native 导航功能不起作用

javascript - 编写 XHR 同步行为的替代方法

android - ionic 自定义 oauth2 重定向 URL Angular

angular - 如何覆盖 Material 中的 matTreeNodePadding 样式?

javascript - 如何隐藏所有 Angular Material 选项卡的选项卡内容

javascript - 插入到数据库进程后的sequelize.js 不退出/关闭

javascript - 在javascript中终止挂起的 promise

javascript - ng-table 中的 ng-include 不起作用

javascript - Angular : Write HTML Output to textfile

angular - 如何禁用 Angular Material 排版样式?