v4 & Material Styling?

Angular Version: ~10.0.14 Angular Material Version: ^10.1.3 ngx-daterangepicker-material: ^4.0.1

Code:

<mat-form-field>
<mat-label>Date Range</mat-label>
<input type="text" matInput
              class="form-control input"
              ngxDaterangepickerMd
              [locale]="{applyLabel: 'ok', format: 'YYYY-MM-DD'}"
              startKey="startDate"
              endKey="endDate"
              [ranges]="dateRanges"
              [(ngModel)]="selectedDateRange"
              [alwaysShowCalendars]="true"
              [showRangeLabelOnInput]="true"
              [showCustomRangeLabel]="true"
              name="daterange"/>
</mat-form-field>

Appearance:

Sorry if this is a silly issue. I may be misunderstanding what the library is stating will happen in an angular material project, but I don’t see it apply the material styling entirely?

[manali-sankey]

I got same issue but you can change styling of date picker. I have changed css properties For given issue i have changed css of .md-drppicker.ltr classes so appearance of datepicker also get changed

[sidrafarooq]

I got same issue but you can change styling of date picker. I have changed css properties For given issue i have changed css of .md-drppicker.ltr classes so appearance of datepicker also get changed

@manali-sankey can you please tell me how you modify the css ? as i am not able to do so. I want to right align the ranges menu and change the styling as well. Using angular 8

You might need to use ng-deep to get access in your css file.

@blockerdude i was able to solve the issue by using ng-deep