2

I am using this datapicker (the range selection) on a project and the blue color of the arrows in the navigation bar is not the right one and I want to change it. I searched on google and here and I can not found an answer that solve my problem.

I have this HTML:

<div id="calenderDisplay">
  <ngb-datepicker #dp (select)="onDateSelection($event)" [displayMonths]="2" [dayTemplate]="t" outsideDays="collapsed"></ngb-datepicker>

  <ng-template #t let-date let-focused="focused">
    <span class="bnt-link" style="color: #12A19A !important;"></span>
    <span class="custom-day"
         [class.focused]="focused"
         [class.range]="isRange(date)"
         [class.faded]="isHovered(date) || isInside(date)"
         (mouseenter)="hoveredDate = date"
         (mouseleave)="hoveredDate = null">
            {{ date.day }}
    </span>
  </ng-template>
</div>

And I try all of this CSS:

.bnt-link {
    color: #12A19A !important;
}

::ng-deep ul {
    background-color: #12A19A !important;
}

ngb-datepicker {
    position: absolute;
    background-color: white;

    .ngb-dp-header {
        background-color: rgba(52,104,191,1);
    }

    select {
        background-color: rgba(52,104,191,1);
        color: white;
    }
}

::ng-deep .ngb-dp-arrow-btn {
    background-color: black;
}

And I can not figure out how to change the color of the blue arrows in the datapicker

Jose Mosquera
  • 23
  • 1
  • 5

1 Answers1

2

You will need to utilize the ::ng-deep pseudo class selector to target the children of the component. A description of this process is described here: https://blog.angular-university.io/angular-host-context/ Please note that ::ng-deep is going to soon be depricated and removed. My understanding is that there is not replacement solution yet in place, so for the time being, we need to continue using it.

EDIT: This code worked on my project, I placed it on the component CSS for the component where I called the ngb-datepicker:

::ng-deep div.ngb-dp-arrow > button {
  color: red;
}
Bill Gardner
  • 196
  • 4
  • 18