web-dev-qa-db-ja.com

angular material date-pickerをカスタマイズするには？

マテリアルデザインの日付ピッカーを使用しています

<md-content flex class="padding-top-0 padding-bottom-0" layout="row">
                <md-datepicker ng-model="user.submissionDate" md-placeholder="Start date" flex ng-click="ctrl.openCalendarPane($event)"></md-datepicker>
                <md-datepicker ng-model="user.submissionDate" md-placeholder="Due date" flex></md-datepicker>
            </md-content>

そして、そのようなUIを示しています enter image description here

カレンダーアイコンを削除し、ng-click機能を入力ボックスに含めたい。

ランタイムイベントを入力ボックスにバインドする方法は？

css

<style>
 .inputdemoBasicUsage .md-datepicker-button {
    width: 36px; }
    .inputdemoBasicUsage .md-datepicker-input-container {
    margin-left: 2px;
  }
    .md-datepicker-input-container{
    display:block;
    }
    .md-datepicker-input[placeholder]{
        color=red;
    }

    .padding-top-0{
    padding-top:0px;}

    .padding-bottom-0{
    padding-bottom:0px;
    }
</style>
javascripthtmlcssangularjsangular-material
13
atjoshi

関数を使用してイベントを操作し、カレンダーの画像を非表示にします：

var app = angular.module('StarterApp', ['ngMaterial']);

app.controller('AppController', function($scope) {
    $scope.initDatepicker = function(){
        angular.element(".md-datepicker-button").each(function(){
            var el = this;
            var ip = angular.element(el).parent().find("input").bind('click', function(e){
                angular.element(el).click();
            });
            angular.element(this).css('visibility', 'hidden');
        });
    };
});
.inputdemoBasicUsage .md-datepicker-button {
  width: 36px;
}
.inputdemoBasicUsage .md-datepicker-input-container {
  margin-left: 2px;
}
.md-datepicker-input-container {
  display: block;
}
.md-datepicker-input[placeholder] {
  color:red;
}
.padding-top-0 {
  padding-top: 0px;
}
.padding-bottom-0 {
  padding-bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">

<div ng-app="StarterApp" ng-controller="AppController" ng-init="initDatepicker();">
    <md-content flex class="padding-top-0 padding-bottom-0" layout="row">
        <md-datepicker ng-model="user.submissionDate1" md-placeholder="Start date" flex ng-click="ctrl.openCalendarPane($event)"></md-datepicker>
        <md-datepicker ng-model="user.submissionDate2" md-placeholder="Due date" flex></md-datepicker>
    </md-content>
</div>
15
Emir Marques

上記のanwserを使用して、表示を改善するためにこの行を変更しました。

.md-datepicker-input-container {
  width: 100%;
  margin-left: 0px;
}
4
LeonardoGuimaraes

@EmirMarquesの回答に加えて、入力フィールドを読み取り専用にしたかった。だから私はこのコードを追加しました。ここでは、ユーザーは日付入力フィールドを編集できません。っていうことは

より良いもの

$scope.initDatepicker = function(){
        angular.element(".md-datepicker-button").each(function(){
            var el = this;
            var ip = angular.element(el).parent().find("input").bind('click', function(e){
                angular.element(el).click();
            });
            angular.element(el).parent().find("input").prop('readonly', true);
            angular.element(this).css('visibility', 'hidden');
        });
};

そして、このCSSは見た目を良くしました

.md-datepicker-input-container {
    display: block;
    margin-left: 0 !important;
    width: 100% !important;;
}
3
shreedhar bhat

AngularJs MD機能を使用しないのはなぜですか？

  • md-hide-icons = "all | triangle | calendar"：すべて/三角形またはカレンダーボタンを非表示にします。
  • Md-open-on-focusは、入力ボックスのクリックでdatepickerを開きます。
<md-content flex class="padding-top-0 padding-bottom-0" layout="row">
                <md-datepicker ng-model="user.submissionDate" md-placeholder="Start date" flex md-hide-icons="calendar" md-open-on-focus></md-datepicker>
                <md-datepicker ng-model="user.submissionDate" md-placeholder="Due date" flex md-hide-icons="calendar" md-open-on-focus></md-datepicker>
            </md-content>
0
A. Salim