Yo estaba usando angulares material. Me parece muy fresco, bien diseñado y fácil de usar.
Yo estaba tratando de cambiar o quitar el calendario icon en datepicker directiva.

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

El icono por defecto es muy bueno pero quiero saltar el icono en algunos casos. bueno, yo puedo usar svg icono con md-icono como este

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

Aquí está mi muestra plunker. Me sugieren alguna idea para cambiar/quitar el icono predeterminado en el selector de fecha.

InformationsquelleAutor Rebel | 2015-11-17

10 Comentarios

  1. 24

    Angular Material 1.1.0 tiene una solución, aunque parece indocumentados.

    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.

    Uso:

    <md-datepicker ng-model="myModel" md-hide-icons="calendar"></md-datepicker>
    • Bajo valorada respuesta! Gracias hombre, resuelto mi problema
    • Que a mi me funciono perfectamente. Sólo para simplificar – todo lo que necesita hacer es pasar en : md-ocultar iconos=»todos» – ocultar tanto el signo de intercalación y el icono de calendario md-ocultar iconos=»calendario» – ocultar sólo icono de calendario md-ocultar iconos=»triángulo» – ocultar sólo símbolo de intercalación icono
  2. 7

    La pregunta original era cómo «cambiar o quitar el icono de calendario en datepicker de la directiva.»?

    Yo sólo sé cómo quitarlo.

    Puede quitar el icono de calendario simplemente colocando lo siguiente en un archivo CSS y agregarlo a la página:

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

    Aquí es una mejor solución.

    1. crear un button con otro icono y colocarlo en el mismo div con 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. conjunto de la button posición para cubrir el original datepicker icono

      <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. establecer el original datepicker icono aparente.

      .md-datepicker md-icon {color: rgba(0,0,0,0) !important;}
      .md-datepicker-open .md-datepicker-calendar-icon {fill:rgba(0,0,0,0)}
    • cómo es mejor ?
    • en su caso, haga clic en el icono no se puede activar el selector de fecha. He intentado, pero el código ng-click="ctrl.openCalendarPane($event) no funciona y va a causar algún error. Esta solución puede evitar.
    • puede usted hizo una plunker de esto ?
    • plnkr.co/editar/sbe2g2oeVillXO3QJUm8?p=vista previa
    • Ok . no está mal . 😀
    • Esta es una mala solución.

  4. 0

    No proporcionan una API opción para especificar el icono, y como se puede ver en datepicker plantilla.

    La md-calendar icono está codificada dentro de la plantilla. Sugiero a ti mismo la creación de una directiva basada en la de ellos y cambiar directamente.

    • gracias . voy a intentar .
  5. 0

    La solución proporcionada por Ralph es una especie de complejo que es que tengo que crear un nuevo directive de sus directive. He encontrado una solución simple a este problema. La plantilla de este md-calendar es el uso de un button con un icon como este

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

    Así que cambiar el css de la clase md-datepicker-buttony ocultar la button

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

    y utilizar otra costumbre icon como este

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

    La icon no es funcional como predeterminado iconpero esto podría resolver mi problema .

    Este es mi solución de la muestra plunker.

  6. 0

    Puede cambiar y ocultar el icono de la siguiente manera:

    Primer lugar darle la md-datepicker de un documento de identidad (o de la clase de destino más de uno):

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

    Puede orientar el icono de css y cambiar el color, tamaño, pantalla, etc:

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

  7. 0

    md-datepicker ahora tiene una configuración de atributo para ocultar los iconos. A partir de la documentación:

    md-ocultar iconos de Cadena

    Determina que datepicker iconos ocultos. Tenga en cuenta que esto puede causar que el selector de fecha para que no se alineen correctamente con otros componentes. Utilice a su propio riesgo. Los valores posibles son:

    • «todos» – Esconde todos los iconos.
    • «calendario» – Sólo oculta el icono de calendario.
    • «triángulo» – Sólo oculta el icono de triángulo.

    El uso de CSS para reemplazar el valor predeterminado icono de triángulo (quiero que el icono de calendario a la derecha) usando un tema personalizado con el FontAwesome icono

    CSS:

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

  8. 0

    Sólo quitar el selector de fecha para alternar icono eliminar(estoy utilizando la última generación de archivos de Angular Material)

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

    Quitar esta línea

    <mat-datepicker-toggle matSuffix [for]="from_date"></mat-datepicker-toggle>
  9. -1

    Sé cómo quitarlo.

    Solo copie y pegue el código de abajo en tu css

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

Dejar respuesta

Please enter your comment!
Please enter your name here