Question

我正在使用angular material。我发现它很酷，设计精良，用户友好。我试图更改或删除icon指令上的日历datepicker。

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

默认图标非常好但我想在某些情况下跳过图标。好吧，我可以使用像这样的md-icon的svg图标

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

这是我的sample plunker。建议我改变/删除datepicker上的默认图标。

Answer 1

Angular Material 1.1.0有一个解决方案，虽然它似乎没有文档。

来自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.

用法：

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

Answer 2

最初的问题是如何“更改或删除datepicker指令上的日历图标。”？

我只知道如何删除它。

您只需将以下内容放入CSS文件并将其添加到您的页面即可删除日历图标：

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

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

Answer 3

这是一个更好的solution。

使用其他图标创建button并将其与datepicker放在同一个div中

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

设置button位置以涵盖原始datepicker图标

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

将原始datepicker图标设置为显示。

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

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

这个适合我。

Answer 5

他们没有提供用于指定图标的API选项，正如您在datepicker template中看到的那样。

md-calendar图标在模板中是硬编码的。我建议你自己创建一个指令并直接改变它。

Answer 6

Ralph提供的解决方案有点复杂，我必须从directive创建一个新的directive。我找到了解决这个问题的简单方法。此md-calendar的模板使用button，icon就是这样

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

所以我更改了课程md-datepicker-button的CSS并隐藏了button

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

并使用其他自定义icon

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

icon无效，默认为icon，但这可以解决我的问题。

这是我的sample solution plunker。

Answer 7

您可以通过以下方式更改和隐藏图标：

首先给md-datepicker一个id（或者多一个目标的类）：

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

然后你可以在css中定位图标并更改颜色，大小，显示等：

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

Answer 8

md-datepicker 现在具有用于隐藏图标的配置属性。来自文档：

md-hide-icons 字符串
确定应隐藏哪些日期选择器图标。请注意，这可能导致日期选择器与其他组件无法正确对齐。使用风险由您自己承担。可能的值有：

“all” - 隐藏所有图标。
“calendar” - 仅隐藏日历图标。
“triangle” - 仅隐藏三角形图标。

使用CSS覆盖默认三角形图标（我想要右侧的日历图标），使用带有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";
}

Answer 9

只需删除日期选择器即可删除图标（我正在使用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>

删除此行

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

Answer 10

mat-icon 和 mat-datepicker-toggle 结合使用可以改变 mat-datepicker 的日历图标

<input [matDatepicker]="basicDatepicker">
<mat-datepicker-toggle [for]="basicDatepicker">
  <mat-icon matDatepickerToggleIcon>
      mouse
  </mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #basicDatepicker></mat-datepicker>

如果使用鼠标，您可以通过以下方式使用您的服装图标：

<mat-icon fontIcon="myCustomIcon"> </mat-icon>

供参考：https://www.angularjswiki.com/material/datepicker/

Answer 11

我知道如何删除它。

只需将以下代码复制并粘贴到您的css

即可

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

从角材料datepicker中删除或更改日历图标

11 个答案: