是否可以显示没有相关输入的Angular Material datepicker？

Question

Angular Material's datepicker正是我所需要的，除了我不希望输入中显示所选日期。我可以使用控件的简单按钮版本吗？

我想使用datepicker选择一个月（类似于下面显示的G​​oogle日历）。

Answer 1

如果您只想选择月份，最好使用md-select。如果要删除md-datepicker的输入，可以使用CSS。据我所知，md-datepicker只能选择几个月。

CodePen

标记

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
  Month selector:
  <br>
  <md-input-container style="margin-right: 10px;">
    <label>Month</label>
    <md-select ng-model="month">
      <md-option ng-repeat="month in months" value="{{month}}">{{month}}</md-option>
    </md-select>
  </md-input-container>
  <br>
  Selected month: {{month}}
  <br>
  <md-divider></md-divider>
  <br>
  Date picker with no input :
  <br>
  <md-datepicker id="myDatePicker" ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
</div>

JS

angular.module('MyApp',['ngMaterial', 'ngMessages'])

.controller('AppCtrl', function($scope) {
  $scope.months = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December"
  ];
});

CSS

#myDatePicker .md-datepicker-input-container,
#myDatePicker .md-datepicker-input-container input,
#myDatePicker .md-datepicker-input-container button {
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
}