How override input CSS styles for ng2-date-picker

Question

I am trying to style the Angular2 ng2-date-picker (link) component and would appreciate any guidance.

I cannot find any documents regarding the styling of this component online, and there is only one similar question on stackoverflow, which does not help me much.

I would like to style the actual `<input >` element inline with the below CSS:

.af-input {
    font-size: 20px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    border-radius: 15px;
    border: solid 1px $af-brownish-grey;
    background-color: transparent;
    color: $af-brownish-grey;
  }

This is my setup in my HTML/View:

<div class="date-picker">
    <dp-date-picker theme="dp-material" [(ngModel)]="selectedDate" mode='daytime' [config]='config'></dp-date-picker>
</div>

These are the CSS attributes I see when inspecting the element in the browser:

dp-date-picker.dp-material .dp-picker-input {
    box-sizing: border-box;
    height: 30px;
    width: 213px;
    font-size: 13px;
    outline: 0;
}

button, input {
    overflow: visible;
}
button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

This is the HTML code when inspecting the ng-date-picker element:

<div _ngcontent-oyd-c55="" class="date-picker">
    <dp-date-picker _ngcontent-oyd-c55="" theme="dp-material" mode="daytime" ng-reflect-theme="dp-material"
        ng-reflect-mode="daytime" ng-reflect-config="[object Object]" class="dp-material ng-valid ng-dirty ng-touched"
        ng-reflect-model="Fri Jun 19 2020 13:50:18 GMT+0">
        <div ng-reflect-ng-class="[object Object]" class="dp-open">
            <div class="dp-input-container"><input type="text" class="dp-picker-input ng-pristine ng-valid ng-touched"
                    ng-reflect-is-disabled="false" ng-reflect-model="2020-06-19" placeholder=""></div>
        </div>
    </dp-date-picker>
</div>

Thank you in advance!

score 1 · Answer 1 · answered Jun 17 '20 at 12:08

1

It doesn't seem like this component allows configurations styling-wise. You'll need to manually override existing styling with css. Just inspect the element and find the required selectors you want to override. As this is an external component, make sure to wrap your styles with ::ng-deep { ... }, so that your styles get placed at the top of the DOM tree and can override initial styling.

answered Jun 17 '20 at 12:08

Berk Kurkcuoglu

1,453
1
9
11

Thank you for the feedback. I have never used ::ng-deep {...}. I will do some research. – onmyway Jun 17 '20 at 12:29

score 1 · Accepted Answer · answered Jun 17 '20 at 12:48

As per Berk Kurkcuoglu's answer, I solved my styling challenge using ::ng-deep { ... }.

This is my specific implementation to style the <input >:

.date-picker {
    ::ng-deep {
        input {
            &:last-child {
                font-family: $af-default-font;
                font-size: 20px;
                font-weight: normal;
                font-stretch: normal;
                font-style: normal;
                letter-spacing: normal;
                border-radius: 15px;
                border: solid 1px $af-brownish-grey;
                background-color: transparent;
                color: $af-brownish-grey;
            }
        }
    }
}

*See also this answer for more details.

I hope this helps someone else!

How override input CSS styles for ng2-date-picker

2 Answers2