从 angular material 日期选择器中删除或更改日历图标

Question

我正在使用 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。给我一些建议 change/remove 日期选择器上的默认图标。

Answer 1

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

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

Answer 2

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>

所以我更改了 class 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 3

这里有更好的 solution.

用另一个图标创建一个 button 并把它放在同一个 div 和 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>

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

最初的问题是如何"to change or remove the calendar icon on datepicker directive."？

我只知道怎么删除。

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

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

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

Answer 5

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

首先给 md-datepicker 一个 id（或者 class 定位多个）：

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

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

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

Answer 6

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 7

我知道如何删除它。

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

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

Answer 8

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

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

"all" - 隐藏所有图标。
"calendar" - 仅隐藏日历图标。
"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";
}

Answer 9

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

这个适合我。

Answer 10

只需删除 date-picker 图标删除开关（我使用的是 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 11

您可以使用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/

从 angular material 日期选择器中删除或更改日历图标

Remove or change the calendar icon from angular material datepicker

angularjs

svg

datepicker

angular-material