how to override the styles of ngx-datepicker-material? - css

Question

I have ngx-daterangepicker-material in my angular8 app. It's working fine but it is showing vertically for now. I want to show it horizontally and also want to change the styles of date range picker.
I have this in my component.html
<app-content-overlay [dropshadow]="true" [showArrow]="true" [showArrow]="true" right="-32%" arrowRight="40px">
<ng-template appTemplate="item">
<span class="px-2">Date:
<input type="text"
ngxDaterangepickerMd
[autoApply]="options.autoApply"
[locale]="locale"
[showDropdowns]="true"
startKey="start"
endKey="end"
[(ngModel)]="selected"
[minDate]="minDate"
[maxDate]="maxDate"
[closeOnAutoApply]="options.closeOnAutoApply"
firstMonthDayClass="first-day"
lastMonthDayClass="last-day"
emptyWeekRowClass="empty-week"
lastDayOfPreviousMonthClass="last-previous-day"
firstDayOfNextMonthClass="first-next-day"
[timePicker]="timePicker"
[dateLimit]="dateLimit"
name="daterange" (change)="change($event)" class="border-none p-0"/>
<!-- <span *ngIf="filter?.techs?.selected?.length === 0">{{filterTitle?.techs?.all}}</span>
<span
*ngIf="filter?.techs?.selected?.length === 1">{{helperService.firstNameAndLastInitial(filter?.techs?.selected[0].name)}}</span>
<span *ngIf="filter?.techs?.selected?.length > 1">Multiple</span> -->
</span>
</ng-template>
</app-content-overlay>
But it's showing like this
i tried to change styling of this daterangepicker like this in component.scss
.md-drppicker{
top: 37px !important;
left: -98px !important;
right: auto !important;
width: 500px !important;
}
But my styling is not overriding the default styling. how can i do that?

Answer 1

This works, at least for now, before ng-deep goes away
::ng-deep {
ngx-daterangepicker-material {
& {
.md-drppicker {
min-width: 640px !important;
top: 45px !important;
&.double {
.calendar {
td {
&.active {
background-color: ........;
border-radius: ........;
color: ...........;
&.off {
background-color: ........ !important;
border-color: ....... !important;
color: ........ !important;
}
}
}
.....