Transparent background in popup

[cperezabo]

Hi, I updated Angular and Material to v16.2.0 and datetime-picker to v16.0.1
I don't know what changed, but I'm getting a transparent background now. Any idea?

Edit: In fact, confirmation button is missing, the popup won't close and there are no errors in console.

[AdamsContreras999]

yes for me is too same error

[cperezabo]

I updated from v9 to v16, so I don't know if this was working in v15. I would like to find where it broken

[AdamsContreras999]

in fact when all the angular dependencies were in version 16.1.0 it was working fine but angular was updated to version 16.2.0 and there it presented this error.

[tfiil]

I have also experienced the same issue after the upgrade.

However something strange I've noticed is that if I click a "normal" mat-datepicker in the same application and subsequently click the ngx-mat-datetime-picker it will be styled correctly.

If no normal datepicker pop-up has been previously shown it will be transparent.

[cperezabo]

Maybe the issue comes from Material? I haven't got time to debug it deeply. But by what you say seems that the problem can come from upstream

[francobasilico]

There are some updates on 16.2.1.
angular/components@0c4f947#diff-70165fe5f110c97706ce01e94ddf46c6aad553a1c6948dabcd60b14ad6d734b6
Maybe this fix it, will try to give it a go soon

[francobasilico]

I quickly tried it persists in 16.2.1

[serg-mois-capital]

Faced the same problem. Does anybody have any workaround? It's a critical issue.

[cperezabo]

As a workaround I've added some styles globally, not all of them but enough for what I need in the meantime.

.mat-datepicker-content {
  box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f;
  background-color: #fff;
  color: #000000de
}

.mat-calendar-body-selected {
  background-color: #007f51;
  color: #fff;
}

.mat-calendar-body-cell-content {
  border: none !important;
}

[serg-mois-capital]

@h2qutc need your help)

[francobasilico]

Thank you @cperezabo (gracias guacho)
I've tried those and work. As you said it fix some cases, for example, I have actions and have to add extra classes.
thanks for the code.

[pantonis]

Is there any fix for this planned?

[wildercarrot]

Issue still exists.

[John-Santacruz]

Please fix this issue.

[Skelyos]

Strange thing I noticed: if you open a pure Angular datepicker & then open up this datetime picker all the styles are temporarily added back in again until you refresh the page.

Not sure how useful this is but may help debug the problem.

[shivamkatyan]

I was facing the same issue, I have fixed it by adding the missing CSS

[TheDeadCode]

Still persists

[pkitatta]

Any help on this. I have the same problem.

[JUBINBIJU]

I degraded the version from 16.2 to 16.1 and then to 16.0 still its not working. Did that work for anyone?

[JUBINBIJU]

Strange thing I noticed: if you open a pure Angular datepicker & then open up this datetime picker all the styles are temporarily added back in again until you refresh the page.

Not sure how useful this is but may help debug the problem.

yes i was also able to recreate that

[AlexElin]

Could somebody provide a minimal reproducible example (MRE)?

The issue isn't reproduced at the library site. So, having the MRE would be helpful

[Klaster1]

@AlexElin please see the branch I made, you can observe the effect clearly there.

[Guerric-P]

Why this bug appears only now? It's been since Angular 11 and the deprecation of the extractCss configuration property that the styles are not bundled all together in a global CSS file, but dynamically inserted in a style tag when the component shows.

[stnor]

Another repro: https://stackblitz.com/edit/angular-cpmuqe

[stnor]

A simple workaround is to open and close a datepicker to load the styles. This isn't visible to the user. No need for global style hacks.

   //Workaround for https://github.com/h2qutc/angular-material-components/issues/348
   @ViewChild('hiddenpicker')
   private readonly hiddenpicker: MatDatepicker<null>

   ngOnInit() {
        this.hiddenpicker.open();
        this.hiddenpicker.close();
   }

[arjen-t]

The issue does exist, and version 16.x doesn't function well with Angular Material versions >= 16.*. I also encounter styling collisions when using the native Angular Material datepicker alongside the datetimepicker on the same page. Considering that in version 16.x, the default start date is broken (#356), we addressed the issue as follows:

Downgrade to latest version 9.* to maintain support for the default startdate.
Add styling to the component, scoped to the datetimepicker (ngx-mat-datetime-content), to ensure it works with Angular Material >= 16.*.

::ng-deep {
  .mat-mdc-form-field-icon-suffix {
    .mat-mdc-icon-button.mat-mdc-button-base {
      --mdc-icon-button-state-layer-size: 36px;
      width: var(--mdc-icon-button-state-layer-size) !important;
      height: var(--mdc-icon-button-state-layer-size) !important;
      padding: 6px !important;
    }
  }

  //Fix datepicker styling in ngx-mat-calendar untill we can migratet to 16.x fixed all bugs
  ngx-mat-datetime-content {
    &.mat-datepicker-content {
      box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024,
        0 1px 10px #0000001f;
      background-color: #fff;
      color: #000000de;

      .mat-calendar-body-cell {
        position: relative;
      }

      .mat-calendar-body-cell:hover {
        .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
          background-color: #258ea88d;
        }
      }

      .mat-calendar-body-selected {
        background-color: #258ea8;
        color: #fff;
      }

      .mat-calendar-body-today.mat-calendar-body-selected {
        box-shadow: inset 0 0 0 1px #fff;
      }
    }
  }
}

Considering that people invest their free time in maintaining this package, it would be greatly appreciated if the mentioned issues could be resolved. The current state is starting to feel broken.

[yousafzainasir8]

still facing this issue

[Klaster1]

@stnor I tried the open/close hack and it did not help. Even after manually opening an Angular Material date picker, the ngx-mat-datetime-picker is still missing styles.

[Nivijoy]

Overwrite the style
::ng-deep .mat-datepicker-content .mat-calendar {
background-color: #c2185b;
}

::ng-deep .time-container {
background-color: #c2185b;
}

::ng-deep .mat-calendar-body-cell-content.mat-focus-indicator {
color: white;
border: none;
}

[geckodesalpes]

As a workaround I added some styles globally, I've not added all the styles at all, but enough for what I need in the meantime.

.mat-datepicker-content {
  box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f;
  background-color: #fff;
  color: #000000de
}

.mat-calendar-body-selected {
  background-color: #007f51;
  color: #fff;
}

.mat-calendar-body-cell-content {
  border: none !important;
}

Based on your workaround, it is also possible to directly use the mat- variables in order to support theming:

.mat-datepicker-content, .time-container {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  display: block;
  border-radius: 4px;
  background-color: var(--mat-datepicker-calendar-container-background-color);
  color: var(--mat-datepicker-calendar-container-text-color);
}

.mat-calendar-body-cell-content {
  color: var(--mat-datepicker-calendar-date-text-color);
  border-color: var(--mat-datepicker-calendar-date-outline-color)
}

.mat-calendar-body-selected {
  background-color: var(--mat-datepicker-calendar-date-selected-state-background-color);
  color: var(--mat-datepicker-calendar-date-selected-state-text-color);
}

.mat-calendar-body-cell-content {
  border: none !important;
}

.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
  background-color: var(--mat-datepicker-calendar-date-hover-state-background-color);
}

.mat-calendar-arrow {
  fill: var(--mat-datepicker-calendar-period-button-icon-color);
}

[SeraphCoding]

As a workaround I added some styles globally, I've not added all the styles at all, but enough for what I need in the meantime.

.mat-datepicker-content {
  box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f;
  background-color: #fff;
  color: #000000de
}

.mat-calendar-body-selected {
  background-color: #007f51;
  color: #fff;
}

.mat-calendar-body-cell-content {
  border: none !important;
}

Based on your workaround, it is also possible to directly use the mat- variables in order to support theming:

.mat-datepicker-content, .time-container {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  display: block;
  border-radius: 4px;
  background-color: var(--mat-datepicker-calendar-container-background-color);
  color: var(--mat-datepicker-calendar-container-text-color);
}

.mat-calendar-body-cell-content {
  color: var(--mat-datepicker-calendar-date-text-color);
  border-color: var(--mat-datepicker-calendar-date-outline-color)
}

.mat-calendar-body-selected {
  background-color: var(--mat-datepicker-calendar-date-selected-state-background-color);
  color: var(--mat-datepicker-calendar-date-selected-state-text-color);
}

.mat-calendar-body-cell-content {
  border: none !important;
}

.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
  background-color: var(--mat-datepicker-calendar-date-hover-state-background-color);
}

Amazing workaround for now! For me the chevron-up icons for the time selector are also missing. Is this related to this issue? The original issue has its chevrons. Anyone else experiencing that?

[geckodesalpes]

@SeraphCoding Assuming my current understanding of the issue, this may be linked, as my feeling is that the issue could come from breaking changes regarding encapsulation in Angular latest versions.

That said, the time picker buttons are not based on the same principle as the one upper right for the calendar (those last one use borders and 45° rotation). The time picker works with a traditional mat-icon:

Assuming on the original capture, all dependencies are at the latest, there should be a way to make it work if the mat-icon module is properly imported and configured in your project / targetted module.
If you use custom icon provider (like FA) for mat-icon this may be more tricky to find a nice workaround as they are using the old way where the icon name is set as content and not HTML attribute, eliminating a pure CSS workaround possibility. At last should be possible but extremely dirty to do something in vanilla JS / JQuery 🤐.

[samuele-ruffino96]

.mat-datepicker-content {
box-shadow: 0 2px 4px -1px #3, 0 4px 5px #24, 0 1px 10px #0000001f;
background-color: #fff;
color: #000000de
}

.mat-calendar-body-selected {
background-color: #007f51;
color: #fff;
}

.mat-calendar-body-cell-content {
border: none !important;
}

Thank you for workaround. Just a tip for ones who has noticed issues with disabled labels style, in fact for some reason it seems the style for disabled days/years is still missing. Below an example:

How it was before
|

How it looks now
|

As you can see, only the chevrons disabled style is still present, so i added this class below as temporary workaround, hope it'll help you.

.mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
    color: var(--mat-datepicker-calendar-date-disabled-state-text-color);
}

[rhwilburn]

For me the solution was:

/*
 Note: div in the query selector below only to get precidence over the default .mat-datepicker-content-container 
by being more specific. This isn't required for background-color but was required for me to override other things in
 that container 
*/
div.mat-datepicker-content-container {
  background-color: var(--background-color);
  }

Using a variable isn't needed as such; could just be background-color: red; etc

[m-akinc]

The datetime picker includes a theming support file that was copied directly from Angular material, but in Angular material version 16.2, the implementation changed. This datetime picker package is still using the old version of the file, and it doesn't work with the token-based system of v16.2+.

The only way the styling looks right is if the Angular material 16.2+ datepicker gets loaded first, in which case the 'mat-datepicker' theme styles get initialized correctly.

[m-akinc]

@h2qutc I was going to try to update _datepicker-theme.scss to see if that would solve this issue, but I had some concerns:

• there have been no commits since 8/1/23
• it looks like you haven't been active on GitHub since then, so I wonder if you're still maintaining this repo
• there's no CONTRIBUTING file
• running npm install results in dependency conflict errors
• even the newest release of tsickle (two years old) is incompatible with the version of Typescript needed by other dependencies
• running npm run test doesn't find any tests to run
• running npm run e2e fails because the version of ChromeDriver doesn't support recent versions

If you are still maintaining this repo, let me know so I can try to help resolve this issue that so many users are running into.

[SeraphCoding]

Just an FYI - do not use my fork

Just as an FYI for the people waiting in here:
I've begun refactoring (and in that process breaking) this entire repo in a fork of mine. I've installed some more modern linting tools, upgraded the projects dependencies, put a whole lot more emphasis on type safety and much more. It compiles, it also somewhat runs, but it is still nowhere near production ready. This is just a hint in case people scan this post: DO NOT USE MY FORK FOR PRODUCTION

I did this just to see if I can upgrade the repo in a break-neck approach on my own - since I use this component in a production project of mine and wanted an updated version. I sincerely apologize for the resulting horrendous commit history of mine ^^ If you happen to find the time to report issues or even contribute to the fork, I'd greatly appreciate it. I will continue working on it, because I want to use the updated version in a production application eventually.

Fork here: Once more, this isn't working, its just an FYI that I've begun working on upgrading this package.
SeraphCoding/angular-material-components

In that fork - Angular is up to speed

I am slowly and agonizingly working my way to a functioning implementation, especially when it comes to theming, but hey colors seems to work (despite some style hick-ups), so that's something that won't need fixing.

A whole lot of things in that fork are utterly broken, this is just an FYI that someone is working on it

[Prasanna-Sridharan]

.mat-datepicker-content {
box-shadow: 0 2px 4px -1px #3, 0 4px 5px #24, 0 1px 10px #0000001f;
background-color: #fff;
color: #000000de
}
.mat-calendar-body-selected {
background-color: #007f51;
color: #fff;
}
.mat-calendar-body-cell-content {
border: none !important;
}

Thank you for workaround. Just a tip for ones who has noticed issues with disabled labels style, in fact for some reason it seems the style for disabled days/years is still missing. Below an example:

How it was before |

How it looks now |

As you can see, only the chevrons disabled style is still present, so i added this class below as temporary workaround, hope it'll help you.

.mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
color: var(--mat-datepicker-calendar-date-disabled-state-text-color);
}

Thanks for the workaround fix along with previous contributors styles.. saved a lot of time !!

I just added below as well to not show cursor pointer on disabled dates:
button.mat-calendar-body-disabled {
cursor: default !important;
}

[tito-cr]

This seems to be working in Angular 17. I haven't tested it a lot, just basically commented out the workaround code.

[sousawalker]

As a workaround I've added some styles globally, not all of them but enough for what I need in the meantime.

.mat-datepicker-content {
  box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f;
  background-color: #fff;
  color: #000000de
}

.mat-calendar-body-selected {
  background-color: #007f51;
  color: #fff;
}

.mat-calendar-body-cell-content {
  border: none !important;
}

This worket for me. Thankyou.