目前正在使用角度材料构建应用程序,我们需要一个md-calendar组件.我们想要自定义按钮样式和内容,因此不要使用普通的md-datepicker.问题是当打开md-calender时,滚动位置是1933年.当前日期是正确设置的.
如何将滚动位置设置为当前日期?
md-datepicker使用md-calender作为子组件,其中日历滚动到当前日期,因此不应该难以实现.
目前的解决方法是将md-min-date属性设置为接近当前日期的日期,但这不是一个好的解决方案,因为它禁止导航到更早的日期.
代码笔示例:
https://codepen.io/adam-wiman/pen/QKqRzd
< MD-日历>
解决方法
首先我尝试升级到最新的角度材料v1.1.10,这是我在尝试回答这个
SO Answer
时得到的解决方案,但这样做并没有帮助解决你的问题,虽然你可以升级到最新,如果你想摆脱一些错误.
无论如何,问题是由于md-datepicker没有正确初始化,可能有很多原因,我的问题解决方案是使用好的旧可靠性,ng-if重新初始化md-calendar,所以解决了这个问题.
注意:使用ng-if将创建一个隔离的范围,因此可能无法正确更新$scopevariables,在这些情况下,您需要使用$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. -->
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。