从角度材料日期选择器中删除或更改日历图标答案

【问题标题】：Remove or change the calendar icon from angular material datepicker从角度材料日期选择器中删除或更改日历图标
【发布时间】：2016-02-18 08:24:29
【问题描述】：

我使用的是angular material。我觉得它非常酷，设计精良且用户友好。我试图在datepicker 指令上更改或删除日历icon。

<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。建议我更改/删除日期选择器上的默认图标。

【问题讨论】：

标签： angularjs svg datepicker angular-material

【解决方案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>

【讨论】：

这对我来说非常有效。只是为了简化 - 你需要做的就是传入： md-hide-icons="all" - 隐藏插入符号和日历图标 md-hide-icons="calendar" - 只隐藏日历图标 md-hide-icons ="triangle" - 仅隐藏插入符号图标

【解决方案2】：

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

我只知道如何删除它。

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

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

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

【讨论】：

【解决方案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)}

【讨论】：

@Jigs 在你的情况下，点击图标不能触发日期选择器。我试过了，但是代码ng-click="ctrl.openCalendarPane($event) 不起作用，会导致一些错误。这个解决方案可以避免它。
你能把这个做成一个小玩意儿吗？
这是一个糟糕的解决方案。

【解决方案4】：

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

这个对我有用。

【讨论】：

【解决方案5】：

它们不提供用于指定图标的 API 选项，您可以从 datepicker template 中看到。

md-calendar 图标在模板中是硬编码的。我建议根据他们的指令为自己创建一个指令并直接更改它。

【讨论】：

【解决方案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。

【讨论】：

【解决方案7】：

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

首先给 md-datepicker 一个 id（或目标类不止一个）：

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

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

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

【讨论】：

【解决方案8】：

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

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

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

使用带有 FontAwesome 图标的自定义主题使用 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";
}

【讨论】：

【解决方案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>

【讨论】：

【解决方案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/

【讨论】：

【解决方案11】：

我知道如何删除它。

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

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

【讨论】：