如何Angular Material datepicker离开/保持打开状态答案

【问题标题】：How to Angular Material datepicker leave/keep opened如何Angular Material datepicker离开/保持打开状态
【发布时间】：2017-03-29 10:55:57
【问题描述】：

我试过md-blurmd-focus，但都失败了。我正在使用 Angular Material 1.1.3 并且我需要在日期选择操作后保持打开日期选择器。那么，在这个动作之后，如何让它保持打开状态。有人可以帮忙吗？

【问题讨论】：

能否请您添加一些代码或 plnkr/fiddle？
codepen.io/anon/pen/RpezmL?editors=101 这里
试试 md-is-open，它会按需打开 datepicker 的日历。
@KalyanSinghRathore 你读过我写的吗？ :)
@Lukas 谢谢。那太好了。

标签： angularjs datepicker angularjs-material

【解决方案1】：

由于md-datepicker documentation，您无法实现这一点。 ngMaterials 很好，但有很多限制。你可以使用md-calendar 来“伪造”这个，就像在这个runnable demo codepen 中一样。

查看

<div ng-app="MyApp" ng-controller="MyController" layout-padding>
    {{ date }}<br /> 
    <input type="date" ng-model="date" ng-click="openDatePicker()" ng-show="!datePickerOpened">
    <md-calendar class="fixed-calendar" ng-show="datePickerOpened" ng-model="date"></md-calendar>
</div>

CSS

.fixed-calendar {
  width: 340px;
  height: 340px;
  display: block;
}

.fixed-calendar .md-calendar-scroll-mask {
  width: 340px !important;
}

.fixed-calendar .md-virtual-repeat-scroller {
  width: 340px !important;
  height: 308px;
}

应用

angular
    .module('MyApp', ['ngMaterial'])
    .controller('MyController', function($scope, $timeout) {

    //Init
    $scope.datePickerOpened = false;
    $scope.date = new Date();

    //show datepicker action
    $scope.openDatePicker = function () {

        //show datepicker
        $scope.datePickerOpened = true

        //avoid date set to 1933 by async reinit date after ng-show rendering
        $timeout(function () {
             $scope.date = new Date();
        });
    }
});

【讨论】：