CODEWITHSUNDEEP
cssangular-material
Ravi Kishore Reddy Chintha
Ravi Kishore Reddy Chintha

Reputation: 1

How to set background color to Angular Material's date picker

I'm trying to add the background color in the css for the calendar icon in the angular material date picker. I'm not getting any changes. 

<mat-form-field class="mr3">
    <input matInput [matDatepicker]="startdate" placeholder="Choose a date">
    <mat-datepicker-toggle matSuffix [for]="startdate"></mat-datepicker-toggle>
    <mat-datepicker #startdate></mat-datepicker>
</mat-form-field>

<mat-form-field class="ml3">
    <input matInput [matDatepicker]="enddate" placeholder="Choose a date">
    <mat-datepicker-toggle matSuffix [for]="enddate"></mat-datepicker-toggle>
    <mat-datepicker #enddate></mat-datepicker>
</mat-form-field>

Not able to see any changes. It's showing the same default background color.

Upvotes: 0

Views: 5896

Answers (1)

Douglas P.
Douglas P.

Reputation: 560

I don't know exactly the reason but to overwrite angular material styles you have to add your CSS in your styles.css (global). So in that file, you can just overwrite whatever property you need.

.mat-datepicker-toggle .mat-icon-button {
  background-color: red;
}
.mat-calendar {
  background-color: lightgreen;
}

Take a look at this working example.

Upvotes: 1

Related Questions