自定义 Angular 6 材质日期选择器答案

【问题标题】：Customize Angular 6 material datepicker自定义 Angular 6 材质日期选择器
【发布时间】：2018-07-30 21:46:49
【问题描述】：

我正在尝试弄清楚如何自定义选定的日期月份标签并删除内框阴影。我一直无法为这些项目找到合适的选择器：

.mat-calendar-content {
    padding: 0px 0px 8px 0px !important;
    outline: 0;
}

.mat-calendar-body-cell-content .mat-calendar-body-selected {
    border-radius: 100% !important;
    color: orange !important;
}

所以基本上我试图将月份居中，移除内框阴影并使所选项目背景为圆形而不是方形。角度材料中的当前示例已经具有圆圈并移除了框阴影。不知道为什么我仍然使用旧格式。

current date-picker

<mat-form-field color="warn">
    <input [min]="min" [max]="max" (click)="picker.open()" matInput [matDatepicker]="picker" [ngModel]="initDate" (ngModelChange)="changeDate($event)" placeholder={{placeHolder}}>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
</mat-form-field>
<mat-datepicker [startAt]="initDate" #picker></mat-datepicker>

【问题讨论】：

标签： javascript html css angular datepicker

【解决方案1】：

想出了这个。只需要 ::ng-deep 在 css 选择器之前。

【讨论】：

【解决方案2】：

谢谢扎布斯！非常有帮助！ CSS再次做到了。您使用 CSS 和 nth-child 的提示很棒。我设法用以下课程为周末字体着色：

.mat-calendar-table {
  td:first-child > .mat-calendar-body-cell-content {
    color: #dfa5a5 !important;
  }
  td:nth-child(7) > .mat-calendar-body-cell-content {
    color: #dfa5a5 !important;
  }
}

【讨论】：