Material: datepicker hide icon

[fabiusss]

It would be useful to hide the icon through an attribute, for example: md-hide-icon

[mattdanna]

:+1: Agreed, but it doesn't sound like it's a priority at the moment per https://github.com/angular/material/issues/4756#issuecomment-142444212

[jelbourn]

If you want to hide the icon, you can use a bit of custom CSS:

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

[mattdanna]

@jelbourn That's a fine stopgap solution, but it causes other alignment / padding issues and inconsistencies, especially when trying to use it inline.

The button should really be an attribute on the md-datepicker component (shown by default to encourage following spec). Ultimately, the more consistent we can get the datepicker's input styling with the other inputs, the better.

cc @topherfangio

[ashok-sarathi]

User css style...

._md-datepicker-floating-label._md-datepicker-has-calendar-icon>label:not(.md-no-float):not(.md-container-ignore){
    left: 0px;
    width: 100%;
}

.md-icon-button+.md-datepicker-input-container{
    margin-left: 0px;
}

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

md-input-container .md-input{
    width: 200px;
}

(change **md-input-container .md-input{
    width: 200px;
}

** width u r choice..

[omelsoft]

When using flex layout.

change:

md-input-container .md-input{
  width: 200px;
}

if using sass to:

md-input-container {
    .md-input,
    .md-datepicker-input-container {
        width: 100%;
    }
}

[maghidini]

This has a solution, it was introduced in angular material version 1.1.0 :)

• @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.
  
  

Example:

<md-datepicker ng-model="myDate" md-hide-icons="calendar"></md-datepicker>

[mtrogers]

Unfortunately, this causes the datepicker to ignore material layouts

[chaimmw]

I removed the toggle element and called .open on the input

<mat-form-field> <input matInput class="date-input" [matDatepicker]="picker" (click)="picker.open()" [formControl]="selectedDate"> <mat-datepicker #picker></mat-datepicker> </mat-form-field>
that removed the icon for me.

[Splaktar]

@chaimmw Please submit Angular Material questions here and issues here. This repo is for AngularJS Material.