Entfernen oder ändern Sie das Kalendersymbol aus eckigen Material Datumsauswahl

Question

Ich verwendete angular material. Ich finde es sehr cool, gut gestaltet und benutzerfreundlich. Ich habe versucht, den Kalender icon auf datepicker Richtlinie zu ändern oder zu entfernen.

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

Das Standardsymbol ist sehr gut, aber ich möchte das Symbol in einigen Fällen überspringen. Nun, ich kann wie diese hier

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

svg Symbol mit md-Symbol verwenden, um mein sample plunker ist. Schlage mir eine Idee vor, das Standard-Icon auf Datepicker zu ändern/zu entfernen.

Answer 1

scharfkantiges Material 1.1.0 hat eine Lösung, obwohl es nicht dokumentiert zu sein scheint.

Von Winkel Material/modules/js/picker/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. 

Verbrauch:

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

Answer 2

Sie bieten keine API-Option für die Angabe des Symbols, und wie Sie von datepicker template sehen können.

Das Symbol md-calendar ist in der Vorlage fest codiert. Ich schlage vor, sich selbst eine Direktive zu erstellen und diese direkt zu ändern.

Answer 3

Die von Ralph zur Verfügung gestellte Lösung ist eine Art Komplex, der ich eine directive von ihrem directive neu erstellen muss. Ich habe eine einfache Lösung für dieses Problem gefunden. Die Vorlage dieses md-calendar wird mit einem button mit einem icon wie diese

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

, damit ich die CSS-Klasse ändern md-datepicker-button und die button

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

verstecken und verwenden Sie einen anderen benutzerdefinierten icon wie diese

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

Die icon ist nicht als defau funktional lt icon aber das würde mein Problem lösen.

Das ist meine sample solution plunker.

Answer 4

Hier ist eine bessere solution.

1. ein button mit einem anderen Symbol erstellen und es in der gleichen div setzt mit picker

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

2. die button Postion stellen Sie das ursprüngliche datepicker Symbol

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

3. setzten die zur Deckung das Original datepicker Symbol zu offensichtlich.

   .md-datepicker md-icon {color: rgba(0,0,0,0) !important;} 
   .md-datepicker-open .md-datepicker-calendar-icon {fill:rgba(0,0,0,0)} 
   

Answer 5

Die ursprüngliche Frage war, wie man „ändern oder das Kalendersymbol auf picker Richtlinie zu entfernen.“?

Ich weiß nur, wie man es entfernt.

können Sie das Kalendersymbol entfernen, indem Sie einfach die folgenden in einer CSS-Datei setzen und Hinzufügen zu Ihrer Seite:

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

.md-datepicker-input-container { 
    margin-left: 0 !important;  
} 

Answer 6

Sie können das Symbol in der folgenden Art und Weise ändern und verstecken:

Erste gibt den md-Datepicker picker~~POS=HEADCOMP eine ID (oder eine Klasse mehr als ein Ziel):

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

dann können Sie das Symbol in CSS-Ziel und die Farbe, Größe, Display usw. ändern:

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

Answer 7

Ich weiß, wie es zu entfernen.

Kopieren Sie einfach und fügen Sie den Code unten in Ihrem css

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

Answer 8

md-pickerjetzt hat ein Konfigurationsattribut für die Symbole versteckt. Aus der Dokumentation:

md-hide-Icons String
Legt fest, welche Symbole Datepicker ausgeblendet werden sollen. Beachten Sie, dass dies dazu führen kann, dass der Datepicker nicht korrekt mit anderen Komponenten ausgerichtet ist. Benutzung auf eigene Gefahr. Mögliche Werte sind:

• "alle" - Versteckt alle Symbole.
• "Kalender" - Blendet nur das Kalendersymbol aus.
• "Dreieck" - Blendet nur das Dreiecksymbol aus.

CSS Verwendung des Standarddreieckssymbol außer Kraft zu setzen (ich will das Kalendersymbol auf der rechten Seite) mit einem benutzerdefinierten Thema mit dem FontAwesome Symbol

/* 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"; 
 
}

Answer 9

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

Dieser funktioniert bei mir.