ngx-mat-datetime-picker is improperly formatted in angular 16

[annamichalik]

Only version "@angular/material": "16.1.1" works correctly for me . I had created this example : source code : https://github.com/annamichalik/AngularMaterial16 live example : [https://stackblitz.com/~/github.com/annamichalik/AngularMaterial16]

When on first loaded/ refreshed page you select first the Date/Time you will see :

When you select 'Choose a date' and then select Date/Time proper view is visible

I have described the issue also here : https://stackoverflow.com/questions/77114244/angular-material-components-datetime-picker-is-improperly-formatted-in-angular/78007657#78007657

[labisda]

Hi,

As a work around. I created a custom css for this.

.mat-datepicker-content {
  background: map-get(palette.$navyNeutral, navy1);
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12); // angular's box shadow for datepicker

  // Removes the circles around the dates
  .mat-calendar-body-cell-content {
    border: none;

    // When date was hovered, this is what it will look like
    &:hover {
      background: map-get(palette.$greenCore, green2);
    }

    // When date was selected, this is what it will look like
    &.mat-calendar-body-selected {
      background: map-get(palette.$greenCore, green0);
      color: #fff;
    }
  }
}

I hope this helps. :)

[hncleary]

@labisda thanks for the css 🎉

The class provided solved my calendar selection issues, but I still had display issues with my timepicker. Providing my additional scss for anyone experiencing the same problem as me:

=>

.mat-datepicker-content {
    background: white;
    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); // angular's box shadow for datepicker

    // Removes the circles around the dates
    .mat-calendar-body-cell-content {
        border: none;

        // When date is hovered
        &:hover {
            background: #a3a3a3;
        }

        // When date is selected
        &.mat-calendar-body-selected {
            background: #a3a3a3;
            color: #fff;
        }
    }

    .ngx-mat-timepicker {
        padding-bottom: 10px;
        tr,
        td {
            background-color: #ffffff01 !important;
            &:hover {
                background-color: #ffffff01 !important;
            }
        }
        tr {
            padding-top: 5px;
        }
        .mat-mdc-form-field-subscript-wrapper {
            display: none;
        }
        button {
            margin-top: 3px;
        }
        .mat-mdc-icon-button {
            border: solid #80808075 1px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding-right: 0px;
            &:hover {
                background-color: #a3a3a37b;
            }
        }
    }
}

[Didasko]

Thanks for the workarounds.

If you want to keep the graying of dates below "min" or above "max", you can add the following style:

.mat-calendar-body-disabled > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
  color: rgba(0, 0, 0, 0.38);
}

A patch to make this component work with Angular 16.2.12 would still be welcome.