Geek Answers Handbook

Remove or change calendar icon from angular datepicker material

I used angular material . I find it very cool, well designed and user friendly. I tried to change or delete the icon calendar in the datepicker directive.

 <md-datepicker ng-model="myDate" md-placeholder="Enter date" ></md-datepicker>

The default icon is very good, but I want to skip the icon in some case. ok i can use svg icon using md-icon like this

  <md-icon md-svg-src="calendar.svg"></md-icon>

Here is my plunker sample . Invite me to change or remove the default icon on datepicker.

+7
source share
10 answers

Angular Material 1.1.0 has a solution, although it seems undocumented.

From angular -material / modules / js / datepicker / datepicker.js:

 * @param {String=} md-hide-icons Determines which datepicker icons should be hidden. Note that this may cause the * datepicker to not align properly with other components. **Use at your own risk.** Possible values are: * * `"all"` - Hides all icons. * * `"calendar"` - Only hides the calendar icon. * * `"triangle"` - Only hides the triangle icon.

Using:

 <md-datepicker ng-model="myModel" md-hide-icons="calendar"></md-datepicker>
+23
source

The initial question was how to "change or delete the calendar icon in the datepicker directive."?

I just know how to remove it.

You can remove the calendar icon by simply placing the following in a CSS file and adding it to your page:

 .md-datepicker-button { display: none !important; } .md-datepicker-input-container { margin-left: 0 !important; }
+7
source

Here is the best solution .

  • create a button with a different icon and put it in the same div with datepicker

     <div flex=40> <md-icon md-svg-src="calendar.svg"></md-icon> <md-datepicker ng-model="myDate" md-placeholder="Enter date" ></md-datepicker> </div>

  • set button to close original datepicker icon

     <div flex=40> <md-icon style="position:absolute;margin-top:15px; left:20px" md-svg-src="calendar.svg"></md-icon> <md-datepicker ng-model="myDate" md-placeholder="Enter date" ></md-datepicker> </div>

  • set the original datepicker icon.

     .md-datepicker md-icon {color: rgba(0,0,0,0) !important;} .md-datepicker-open .md-datepicker-calendar-icon {fill:rgba(0,0,0,0)}
+3
source 
 .md-datepicker-button.md-icon-button { display: none; }

This works for me.

+2
source

They do not provide an API option for specifying an icon, and, as you can see from the date picker template .

The md-calendar icon is hardcoded inside the template. I suggest creating a directive based on them and changing it directly.

0
source

The solution provided by Ralph is rather complicated, so I need to create a new directive from their directive . I found a simple solution to this problem. The template for this md-calendar uses a button with an icon like this

  <md-button class="md-datepicker-button md-icon-button" type="button" tabindex="-1" aria-hidden="true" ng-click="ctrl.openCalendarPane($event)"> <md-icon class="md-datepicker-calendar-icon" md-svg-icon="md- calendar"> </md-icon> </md-button>

So, I modify the css of class md-datepicker-button and hide the button

 .calendarDiv .md-datepicker-button{ display: none; }

and use another custom icon like this

 <md-icon md-svg-src="calendar.svg"></md-icon>

icon does not work by default icon , but this will solve my problem.

This is my sample plunker for samples .

0
source

You can change and hide the icon as follows:

First give the md-datepicker id (or class for more than one):

 <md-datepicker id="my-date-picker"></md-datepicker>

Then you can target the icon in css and change the color, size, display, etc.:

#my-date-picker .md-datepicker-calendar-icon { color: green; display: none; }

0
source

md-datepicker now has a configuration attribute for hiding icons. From the docs:

md-hide-icons string
Determines which datepicker icons should be hidden. Please note that this may result in the datepicker not being properly aligned with other components. Use at your own risk. Possible values:

  • "all" - hides all the icons.
  • "calendar" - only hides the calendar icon.
  • "triangle" - only hides the triangle icon.

Using CSS to override the default triangle icon (I want the calendar icon on the right) using a special theme with the FontAwesome icon

 /* override md material*/ .md-custom-theme .md-datepicker-input-container { width: 100%; border: none; } .md-custom-theme .md-datepicker-expand-triangle { border:none; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -webkit-transform: none; transform: none; top: 6px; right:0; } .md-custom-theme .md-datepicker-expand-triangle:before { content: "\f073"; }
0
source

Just remove the date picker to delete the icon (I use the latest Angular Material files)

 <mat-form-field appearance="outline" (click)="from_date.open()"> <mat-label>From Date</mat-label> <input matInput [matDatepicker]="from_date"> <mat-datepicker-toggle matSuffix [for]="from_date"></mat-datepicker-toggle> <mat-datepicker #from_date></mat-datepicker> </mat-form-field>

Delete this line

 <mat-datepicker-toggle matSuffix [for]="from_date"></mat-datepicker-toggle>
0
source

I know how to remove it.

Just copy and paste the code below into your CSS

 div.layout-align-start-start.layout-row>.md-icon-button.md-button.md-ink-ripple:not(.md-raised){ display: none;}
-1
source

More articles:


All Articles