如何自定义角度材料日期选择器？

Question

我正在使用材料设计日期选择器

<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

我想删除日历图标并在输入框中包含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>

Answer 1

使用该功能进行操作事件并隐藏日历图像：

 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> 

Answer 2

使用上面的anwser，我更改了这一行以更好地显示：

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

Answer 3

除@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;;
}

Answer 4

为什么不使用AngularJs MD功能？

• md-hide-icons =“all | triangle | calendar”：隐藏所有/三角形或日历按钮;
• 并且md-open-on-focus在输入框上单击打开日期选择器。

 <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>