如何防止 md-datepicker (angular material 2.0.0) 关闭

Question

用户可以单击图标打开选择器，我可以 picker.open() 打开它。但是，只要我做任何事情（选择一天，点击其他地方等），它就会关闭。有没有办法让它保持打开状态？

我读到在 angularjs material1 中是不可能的。现在可以吗？

Answer 1

查看

<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();
        });
    }
});

Answer 2

虽然不是推荐的解决方案，但您可以这样做：

<md-input-container>
  <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
  <button mdSuffix [mdDatepickerToggle]="picker" (click)="pickerOpened()"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>

.

@ViewChild(MdDatepicker) datepicker

pickerOpened() {
  setTimeout(() => this.datepicker.opened = false);
}

https://plnkr.co/edit/eAr7oQC0gqZAsjb3k7Sp?p=preview

如何防止 md-datepicker (angular material 2.0.0) 关闭

how to keep md-datepicker (angular material 2.0.0) from closing

datepicker

angular-material2

angular