How to Customise the angular material date-picker?

Question

I am using the material design 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>

and its shows the UI like this

I want to remove the calendar icon and include the ng-click functionality in the input box.

How to bind the runtime event with the input box?

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>

I also would be interested how to split date field and picker here. Thx. — user250773
– user250773, Commented Nov 13, 2015 at 10:37
Just inspect the elements that the Browser output and then map it on your css file changing it using !important — felipekm
– felipekm, Commented Feb 3, 2016 at 12:43

Ander2 · Accepted Answer · 2017-02-08 14:03:39Z

Use the function for manipulate event and hide image of calendar as:

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>

i'm new to css and angular can you please explain me or give some link so that i understand how is that ip is working..and great solution it was really helpfull
@santhosh, i not understand you question. You can read the documentation of angular or material: krescruz.github.io/angular-materialize
i have not understood that initialization to the variable ip.

LeonardoGuimaraes · Accepted Answer · 2015-12-21 19:36:13Z

4

using the above anwser, I changed this lines to display better:

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

answered Dec 21, 2015 at 19:36

LeonardoGuimaraes

2753 silver badges17 bronze badges

1 Comment

Venu Madhav Over a year ago

Actually I am trying to write my own styles like you in my component but it is not effecting in output, where i have to write my own styles to get effected, now am writing in my.component.css.

shreedhar bhat · Accepted Answer · 2017-01-13 07:05:31Z

Additional to @EmirMarques answer, I wanted to make the input field read only. so i added this code. Here user can't edit the date input field. so its

Better One

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

And this CSS made the look better

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

A. Salim · Accepted Answer · 2017-08-16 16:30:10Z

Why not using AngularJs MD functionality?

md-hide-icons="all|triangle|calendar": to hide all/triangle or calendar buttons;
And md-open-on-focus to open datepicker on input box click.

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

Collectives™ on Stack Overflow

How to Customise the angular material date-picker?

4 Answers 4

3 Comments

1 Comment

Better One

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Better One

Comments

Comments

Related