Question

我坚持自定义md-datepicker的大小！我在md-input-container中使用它但显示了拾取器之后的大小，它占用了我所有的屏幕尺寸。下面是我的代码：

<md-input-container flex-xs>
    <label>Start Date</label>
    <md-datepicker ng-model="leave.start_date"></md-datepicker>
</md-input-container>

我是否需要包含此日期选择器的任何原始样式？提前谢谢！

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

<强> CSS 这来自日期选择器如何在场景后面构建

.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;
}

<强> HTML

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

md-datepicker的宽度太大了

1 个答案: