Transparent background and non responsive date buttons

Recently I upgrade this project from version 2.1.8 to version 3.0.1 because I am on angular 9. and noticed this side effect. The obvious thing to notice is the background is transparent. Additionally when you click either the rangers or calendar buttons themselves there is no response, though the button/range is actually clicked. The picture does not do the second point justice, though it is difficult to capture.

This behavior is visible with both v3.0.0 and v3.0.1 but it is not visible on v2.3.0

Package.json (The dependencies section)

"@angular/animations": "^9.0.0-rc.7",
"@angular/cdk": "^9.0.0-rc.6",
"@angular/common": "^9.0.0-rc.7",
"@angular/compiler": "^9.0.0-rc.7",
"@angular/core": "^9.0.0-rc.7",
"@angular/flex-layout": "^8.0.0-beta.27",
"@angular/forms": "^9.0.0-rc.7",
"@angular/localize": "~9.0.0-rc.7",
"@angular/material": "^9.0.0-rc.6",
"@angular/platform-browser": "^9.0.0-rc.7",
"@angular/platform-browser-dynamic": "^9.0.0-rc.7",
"@angular/router": "^9.0.0-rc.7",
"@ngxs/store": "^3.6.0",
"core-js": "^2.5.4",
"deep-freeze-strict": "^1.1.1",
"moment": "^2.24.0",
"ngx-daterangepicker-material": "3.0.0",
"query-string": "^6.8.2",
"rxjs": "^6.5.3",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"

html file

<div class="filter-container">
    <mat-form-field class="date-range-picker">
      <mat-label>Date Range</mat-label>
      <input
        type="text"
        matInput
        autocomplete="off"
        ngxDaterangepickerMd
        [ranges]="getRanges()"
        [alwaysShowCalendars]="true"
        [timePicker]="true"
        [showCancel]="true"
        [showClearButton]="true"
        [timePickerSeconds]="true"
        [timePicker24Hour]="false"
        [keepCalendarOpeningWithRange]="true"
        [showDropdowns]="true"
        (datesUpdated)="datesUpdated($event)"
        [locale]="{ format: 'MM/DD/YYYY HH:mm:ss', firstDay: 1 }"
        [(ngModel)]="selectedDate"
        [value]="singleDateDisplay"
        class="form-control"
      />
    </mat-form-field>
</div>

The biggest reasons I want to upgrade is because the git page recommends using v3 for Angular 9 projects and it has improved styling for the ‘clear’ button which on v2.3.0 doesn’t look nearly as good.

Have I forgot to flip a switch or do I have an incompatible library, any tips?

[jgeiger-cr]

Not sure exactly what you’re trying to do there because you’ve copied our “oio” stuff out of context – we use our own theme and use the mixin’s. But if all you want to try is e.g. the $ui-app-theme applied to the the picker, then omit the mixin’s. This should work:

.dark-theme {
  @include angular-material-theme($dark-theme);
}
@include date-range-picker-theme($ui-app-theme);

[anishsam]

Hi,

I am having the exact same issue. Only change I did was to upgrade ngx-daterangepicker-material to the latest 3.0.1 release, and now, the date picker is all transparent background. Looks like this is a common issue - is there a fix for this?

Thanks.