目前正在构建一个使用 Angular Material 的应用程序,我们需要一个 md-calendar 组件。我们想要自定义按钮样式和内容,因此不使用普通的 md-datepicker。问题是,当 md-calender 打开时,滚动位置位于 1933。当前日期设置正确。
如何将滚动位置设置为当前日期?
md-datepicker 使用 md-calender 作为子组件,其中日历滚动到当前日期,因此应该不难实现。
当前的解决方法是将 md-min-date 属性设置为接近当前日期的日期,但这不是一个好的解决方案,因为它禁止导航到更早的日期。
代码笔示例:https://codepen.io/adam-wiman/pen/QKqRzd https://codepen.io/adam-wiman/pen/QKqRzd
<md-calendar>
首先我尝试升级到最新版本angular material v1.1.10
这是我在尝试回答这个问题时得到的解决方案SO Answer https://stackoverflow.com/questions/51804677/why-md-calendar-directive-initialize-to-wrong-date-angularjs/51805996#51805996,但是这样做并不能帮助解决您的问题,尽管如果您想消除一些错误,您可以升级到最新版本。
无论如何,问题是由于md-datepicker
没有正确初始化,可能有很多原因,我对你问题的解决方案是使用老旧的值得信赖的,ng-if
重新初始化md-calendar
,这样做可以解决这个问题。
注意:使用ng-if
将创建一个孤立的范围,因此有可能$scope
变量未正确更新,在这些情况下,您需要使用$parent
属性来解决它,参考here https://stackoverflow.com/questions/18342917/angularjs-ng-model-doesnt-work-inside-ng-if.
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.
-->
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)