CSS editing angular2 datepicker doesn't work

Question

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/.

Gustavo Lopes · Accepted Answer · 2019-09-13 17:04:15Z

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.

answered Sep 13, 2019 at 17:04

Gustavo Lopes

4,2634 gold badges24 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

slomil Over a year ago

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 Over a year ago

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.)

Gustavo Lopes Over a year ago

Can you please create a minimal-reproducible-example on stackblitz?

Collectives™ on Stack Overflow

CSS editing angular2 datepicker doesn't work

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related