web-dev-qa-db-fra.com

Supprime ou modifie l’icône de calendrier du matériau de date angulaire.

J'utilisais angular material . Je le trouve très cool, bien conçu et convivial. J'essayais de changer ou de supprimer la directive calendar icon on datepicker. 

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

L'icône par défaut est très bonne, mais je souhaite ignorer l'icône dans certains cas. Eh bien, je peux utiliser l'icône svg en utilisant md-icon comme ça 

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

Voici mon échantillon plunker . Suggérez-moi une idée pour changer/supprimer l’icône par défaut sur datepicker. 

angularjssvgdatepickerangular-material
7
Rebel

Angular Material 1.1.0 a une solution, même si elle semble non documentée.

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

Usage:

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

La question initiale était comment "changer ou supprimer l'icône de calendrier sur la directive datepicker."?

Je sais juste comment l'enlever.

Vous pouvez supprimer l'icône du calendrier en mettant simplement ce qui suit dans un fichier CSS et en l'ajoutant à votre page:

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

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

Voici une meilleure solution .

  1. créer une button avec une autre icône et la placer dans le même div avec 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>

  2. définir la position button pour couvrir l'icône datepicker d'origine

    <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. définissez l'icône datepicker d'origine sur apparent. 

    .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
Renyuan wang
.md-datepicker-button.md-icon-button {
  display: none;
}

Celui-ci fonctionne pour moi.

2
Yuxuan Chen

Ils ne fournissent pas d’option d’API permettant de spécifier l’icône, et comme vous pouvez le voir dans datepicker template .

L'icône md-calendar est codée en dur à l'intérieur du modèle. Je suggère de créer vous-même une directive basée sur la leur et de la changer directement.

0
Ralph Sto. Domingo

Je sais comment l'enlever.

Il suffit de copier et coller le code ci-dessous dans votre css

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

Vous pouvez modifier et masquer l'icône de la manière suivante:

Donnez d’abord un identifiant à md-datepicker (ou une classe pour en cibler plusieurs):

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

Ensuite, vous pouvez cibler l’icône dans css et changer la couleur, la taille, l’affichage, etc.:

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

0
Mustafa J

La solution fournie par Ralph est un peu complexe, je dois créer une nouvelle variable directive à partir de leur directive. J'ai trouvé une solution simple à ce problème. Le modèle de ce md-calendar utilise une button avec une icon comme ceci 

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

Donc, je change le css de la classe md-datepicker-buttonet cache la button 

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

et utiliser une autre coutume icon comme celle-ci 

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

La icon n'est pas fonctionnelle par défaut icon mais cela résoudrait mon problème. 

Ceci est mon échantillon de solution plunker .

0
Rebel

md-datepicker now a un attribut de configuration permettant de masquer les icônes. De la docs:

md-hide-icons String
Détermine quelles icônes datepicker doivent être masquées. Notez que cela pourrait empêcher le sélecteur de date de s’aligner correctement avec d’autres composants. À utiliser à vos risques et périls. Les valeurs possibles sont:

  • "all" - masque toutes les icônes. 
  • "calendar" - Masque uniquement l'icône du calendrier.
  • "triangle" - Masque uniquement l'icône du triangle.

Utilisation de CSS pour remplacer l'icône de triangle par défaut (je veux l'icône de calendrier à droite) à l'aide d'un thème personnalisé avec l'icône FontAwesome

/* 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
dhwang