為什么 md-datepicker 不會在當前日期打開？

Question

嗨，我使用角材料日期選擇器。 小問題是，當我點擊日期並打開日歷時 - 它打開並顯示不是今天的日期。而是一些很遠的日期。 如何在今天日期或至少在 ng-model 日期打開日歷？

顯示日期：

單擊時打開日歷：

這是html：

  <md-datepicker class="font" ng-model="vm.startDate"></md-datepicker>

js獲取模型：

     vm.startDate = new Date();

提前感謝您的幫助。

更新：注意到奇怪的行為：

CASE1：當我滾動頁面並且日歷幾乎在頁面頂部時：

當我打開日歷時，它會顯示當前日期，如下所示：

案例2：相同但當日期選擇器在底部頁面滾動時：如果遠遠落后，則為當前日期...

Answer 1

演示

 angular.module('datepickerBasicUsage', ['ngMaterial']) .controller('AppCtrl', function ($scope) { var vm = this; vm.startDate = new Date(); });

 <!doctype html> <html ng-app="datepickerBasicUsage"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.css"> <script src="app.js"></script> </head> <body> <div ng-controller="AppCtrl as vm" style='padding: 40px;'> <md-content> <h4>Standard date-picker</h4> <md-datepicker ng-model="vm.startDate" md-placeholder="Enter date"></md-datepicker> </md-content> </div> </body> </html>

Answer 2

當我的日期選擇器位於頁面底部有滾動條和角度材料版本為 1.1.1 時，我遇到了這個問題

如果 angular material js 升級到最新版本，這可以很容易地修復。

如果您對升級角度材料版本猶豫不決

在控制器中嘗試這樣的事情

$scope.datepickeropen = function(){
    $timeout(function () {
        var e1 = jQuery.Event("keydown");
        e1.which = 40; // it is down
        $(".md-datepicker-calendar .md-focus").trigger(e1);
        var e2 = jQuery.Event("keydown");
        e2.which = 38; // it is up
        $(".md-datepicker-calendar .md-focus").trigger(e2);
    },500)
}

HTML 作為

<md-input-container>
    <label>Withdrawal Date</label>
    <md-datepicker ng-model="date" ng-focus="datepickeropen()"></md-datepicker>
</md-input-container>

 angular.module('MyApp',['ngMaterial', 'ngMessages']).controller('AppCtrl', function($scope, $timeout) { $scope.myDate = new Date(); $scope.datepickeropen = function(){ $timeout(function () { var e1 = jQuery.Event("keydown"); e1.which = 40; // it is down $(".md-datepicker-calendar .md-focus").trigger(e1); var e2 = jQuery.Event("keydown"); e2.which = 38; // it is up $(".md-datepicker-calendar .md-focus").trigger(e2); },500) } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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.1/angular-material.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css" rel="stylesheet"/> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script> <div ng-controller="AppCtrl" style="padding: 40px;" class="datepickerdemoBasicUsage" ng-app="MyApp" ng-cloak> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <div>Dummy Text for scroll on page</div> <h4>Standard date-picker <u>with issue fixed</u></h4> <md-datepicker ng-model="myDate" md-placeholder="Enter date" md-hide-icons="triangle" ng-focus="datepickeropen()"></md-datepicker> <h4>Standard date-picker <u>with issue</u></h4> <md-datepicker ng-model="myDate" md-placeholder="Enter date" md-hide-icons="triangle"></md-datepicker> </div>

為什么 md-datepicker 不會在當前日期打開？

問題描述

2 個解決方案

解決方案1
3 已采納 2017-05-11 08:35:22

解決方案2
0 2020-05-08 11:26:11

為什么 md-datepicker 不會在當前日期打開？

問題描述

2 個解決方案

解決方案1 3 已采納 2017-05-11 08:35:22

解決方案2 0 2020-05-08 11:26:11

解決方案1
3 已采納 2017-05-11 08:35:22

解決方案2
0 2020-05-08 11:26:11