2017-09-04 57 views
0

我被卡在自定義md-datepicker的大小!我用它在MD-輸入容器,但尺寸示撿拾起來後,它把我所有的屏幕size.Below是我的代碼:md-datepicker寬度太大

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

我需要包括任何款式新穎這個日期選擇器的?預先感謝!

回答

0

用於操縱日曆的寬度和隱藏圖像的功能:

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>