1

I have started recently working with Angular2 datepicker. However, I cannot find out how to edit color/borders/font/etc of datepicker.

I inspected element of datepicker, used class="wc-date-container" and placed it in css file where i added those things, but it doesn't work. Here are parts of my angular component.html and css files.

<angular2-date-picker
   [(ngModel)]="search.date_from"
   [ngModelOptions]="{standalone: true}"
   [settings]="timeSettings" >
</angular2-date-picker> 

.wc-date-container {
    border: 1px solid rgba(155, 151, 151, 0.911);;
}
.wc-date-container > span {
    color: rgba(155, 151, 151, 0.911);
}
.wc-date-container > i {
    font-size: 20px;
    color: rgba(155, 151, 151, 0.911);
}

Thank you very much for looking. I hope I didn't leave out some important detail. I checked out other answers, but didn't find one that addresses this. I used parts of this fiddle https://jsfiddle.net/solomon301/s3hL05s6/.

slomil
  • 193
  • 1
  • 4
  • 12

1 Answers1

0

Angular uses a shadow DOM, as explained here.

The datepicker uses a custom component, so their css classes does not colide with your component's css (this is the css encapsulation) .

What you can do is put the css classes in a global file, generally called style.css, in root folder.

This question explains how to do it properly.

Gustavo Lopes
  • 3,794
  • 4
  • 17
  • 57
  • Thanks for the reply! However, when I placed css classes in styles.scss in root folder, and also placed styles.scss in angular.json, but nothing happens.. – slomil Sep 15 '19 at 17:21
  • this is what my css class look like in styles.css: `.wc-date-container{ border: 1px solid rgba(156, 153, 153, 0.644); background: #fff; } .wc-date-container > span{ color: rgba(156, 153, 153, 0.644); } .wc-date-container > i{ font-size: 20px; color: rgba(156, 153, 153, 0.644); } ` (i wanted to make my calendar looks gray.) – slomil Sep 15 '19 at 17:30
  • Can you please create a [minimal-reproducible-example](https://stackoverflow.com/help/minimal-reproducible-example) on [stackblitz](https://stackblitz.com/)? – Gustavo Lopes Sep 16 '19 at 12:17