CODEWITHSUNDEEP
javascripthtmlcssangulardatepicker
LDB
LDB

Reputation: 611

Customize Angular 6 material datepicker

I'm trying to figure out how to customize the selected date month label and remove the inner box shadow. I've been unable to locate the proper selector for these items: 

.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;
}

So basically I'm trying to center the Month, remove the inner box shadow and make the selected item background be circle instead of square. The current examples in angular material already have the circles and removed box shadow. Not sure why I still have the old format.

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>

Upvotes: 1

Views: 6560

Answers (2)

Chaco
Chaco

Reputation: 23

Thank you Zabs! Very helpful! The CSS did it again. Your hint using CSS and nth-child was great. I managed to color the weekend font with the following class:

.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;
  }
}

Upvotes: 1

LDB
LDB

Reputation: 611

Figured this one out. Just need ::ng-deep before the css selector.

Upvotes: 0

Related Questions