CODEWITHSUNDEEP
cssangular
ahsan
ahsan

Reputation: 297

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

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

enter image description here

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?

Upvotes: 4

Views: 4107

Answers (1)

Roshan Khandelwal
Roshan Khandelwal

Reputation: 973

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;
            }
          }
         }
  .....

Upvotes: 5

Related Questions