How to change Angular Material Datepicker theme?

user_5502443 0
Viewed 6214

I would like to change the theme of the default Angular Material Datepicker. I couldn't find any helpful informations about this isue (I only found for AngularJS or the old Angular Material). I am using the default CSS, but I modified it to my preferences.

This is how the datepicker looks like: https://imgur.com/YmJctem

I would like to change it to this type: https://imgur.com/oVlwCDK

I want to use the material datepicker, because I implemented some code and it works only on material datepicker.

Maybe it sounds funny, but I want to add a Datepicker Material Design to Angular Material Datepicker.

Thanks for your help/advice!

angular-material-7 angular7 angular8 angular themes
1 Answers

If you can provide us a plunker, will make things easier.

In order to achieve what you want you need to override the default angular material CSS classes. After a very quick look, you will see (using inspect) that every element has a css class like 'mat-calendar-header'. You have two options:

  1. Using ::ng-deep pseudo class. If you want to apply a custom style to this class, you can achieve this by adding the pseudo-class ::ng-deep, in front of the angular material css class that you want to override. This style can be added in the angular component specific css file.

    Applying the ::ng-deep pseudo-class to any CSS rule completely disables view-encapsulation for that rule. Any style with ::ng-deep applied becomes a global style.

    Example: ::ng-deep .mat-calendar-header{background-color: red;}

  2. Override the angular material css class in the global styles.css file

user_116078530
Related