[英]How to Customise the 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>
我想刪除日歷圖標並在輸入框中包含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>
使用該功能進行操作事件並隱藏日歷圖像:
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>
使用上面的anwser,我更改了這一行以更好地顯示:
.md-datepicker-input-container {
width: 100%;
margin-left: 0px;
}
除@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;;
}
為什么不使用AngularJs MD功能?
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.