2016-08-27 3 views
0

Angular Material's datepickerは、選択した日付を入力に表示したくないということを除いて、私が必要とするものです。代わりに使用できるコントロールの単純なボタンバージョンはありますか?関連する入力がない角度材の日付ピッカーを表示することはできますか?

月を選択するにはdatepickerを使用したいと思います(下記のGoogleカレンダーに似ています)。

答えて

0

あなただけの数ヶ月を選択したい場合は、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; 
} 
関連する問題