CODEWITHSUNDEEP
javascriptcssangulartypescriptangular-material
Sunitha
Sunitha

Reputation: 261

how to change the styling of the drop down calendar of the ngx-daterangepicker-material

I need to change some of the styling of the calendar like top, left and width. How do I do that?

This here is my date range picker. Adding a class to it and adding style in it does not update the drop down calendar.

<div>
    <input type="text"
    ngxDaterangepickerMd
    [(ngModel)]="selected"
    [showCustomRangeLabel]="true"
    [ranges]="ranges"
    [showClearButton]="true"
    [showCancel]="true"
    [maxDate]="maxDate"
    [minDate]="minDate"
    [linkedCalendars]="true"
    (datesUpdated)="datesUpdated($event)"
    readonly/>
</div>

Upvotes: 1

Views: 4403

Answers (1)

Pujan Shah
Pujan Shah

Reputation: 845

As directive will place the content for the calendar. You can hack those classes which comes with the content. As main div of that content is having a class md-drppicker, you can use this class to update the style in styles.css file.

.md-drppicker {
  top:0;
}

Upvotes: 3

Related Questions