CODEWITHSUNDEEP
cssangulardatepickerangular-material
jxStackOverflow
jxStackOverflow

Reputation: 378

Change color of angular datepicker material component

I am working on a angular material datepicker which will be on a black background. How do I change change the default color of the datepicker's icon, underline and placeholder text to all white color? 

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

Upvotes: 11

Views: 45783

Answers (5)

Dmytro Demianenko
Dmytro Demianenko

Reputation: 387

I'm using Angular Material 14 and this works fine for me:

<mat-form-field class="w-100" appearance="fill">
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
    <input matStartDate formControlName="start" placeholder="Start date">
    <input matEndDate formControlName="end" placeholder="End date">
  </mat-date-range-input>
  <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

style.scss:

.mat-form-field-type-mat-date-range-input .mat-hint {
  color: white !important;
}

.mat-form-field-flex {
  background-color: white !important;
}

.mat-date-range-input-inner {
  color: black !important;
}

Before adding styles:

Before

After:

After

Upvotes: 0

Saahithyan Vigneswaran
Saahithyan Vigneswaran

Reputation: 7143

To set font color above answers didn't work for me. I used following, hope this helps to someone.

To change color

.mat-calendar-body-cell-content, .mat-date-range-input-separator {
  color: blue;
}

To change font size and weight

.mat-calendar-body {
  font-size: 16px;
  font-weight: bold;
}

Add this to styles.css, I'm using Angular 12 and Angular Material 12

Upvotes: 1

Saqib S
Saqib S

Reputation: 541

You can use ::ng-deep. Here is the working example https://stackblitz.com/edit/angular-mat-datepicker-qj73og

::ng-deep .mat-focused .mat-form-field-label {
 /*change color of label*/
 color: white !important;
}

::ng-deep.mat-form-field-underline {
 /*change color of underline*/
 background-color: white !important;
} 

::ng-deep.mat-form-field-ripple {
 /*change color of underline when focused*/
 background-color: white !important;;
}

::ng-deep .mat-form-field-label {
 /*change color of label*/
 color: white !important;
}


mat-datepicker-toggle {
 color: white !important;
}

Upvotes: 16

julianobrasil
julianobrasil

Reputation: 9377

Just follow this guide: https://material.angular.io/guide/theming#theming-only-certain-components.

You can do something like (in some scss theme file:

@import '~@angular/material/theming';

// Just include this next line once in your application, so if you are building
// a file just to theme the datepicker, don't put it here.
@include mat-core();

// Define the datepicker theme.
$datepicker-primary: mat-palette($mat-indigo);
$datepicker-accent:  mat-palette($mat-pink, A200, A100, A400);
$datepicker-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);

// Apply the theme to your component
@include mat-datepicker-theme($datepicker-theme);

Upvotes: 5

לבני מלכה
לבני מלכה

Reputation: 16261

Use ::ng-deep and select those element:

See working example

::ng-deep datepicker-value-example .mat-form-field-label{
   color:red;
}

::ng-deep .mat-datepicker-toggle{
   color:red;
}
::ng-deep .mat-form-field-underline{
background: red;
}

Upvotes: 2

Related Questions