3

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://i.stack.imgur.com/hcvaf.jpg

I would like to change it to this type: https://i.stack.imgur.com/YcgYx.jpg

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!

szilard1996
  • 47
  • 2
  • 6

1 Answers1

-1

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

Alexandru Ciprian Muresan
  • 15
  • 4
  • Yes, I would like to change the css, but I haven't found any good resources to modify ONLY the css, not touching the material library (js/ts files). – szilard1996 Jun 10 '19 at 11:46
  • In this way you don't even touch the original material library, because you will override the material styles in your angular component. The original style will be kept intact. – Alexandru Ciprian Muresan Jun 10 '19 at 12:06