Date time picker style not loading initially.. but works after opening normal material date picker Angular 16

safeer-in commented 1 year ago

initially Ngx-datetimepicker calendar popup not loading properly.. style issue is there.. after open one native material datepicker, Ngx-datetimepicker calendar popup will work correctly.. seems like style loading issue initially

After opening one normal material date picker

please help me to fix this issue

mbsh-code commented 1 year ago

Hello I also have this problem please guide us And it is very important to me

Petermat402 commented 1 year ago

Hi I'm also having this issue.

elvir92 commented 1 year ago

@safeer-in do you have maybe workaround?

safeer-in commented 1 year ago

Yes.. work around is like, I have included the angular material 13 pre-built theme css along with the latest 16 pre-built css.. so it fixed the issue temporarily, but as we know it is not a proper solution

mbsh-code commented 1 year ago

@safeer-in Can you explain more clearly? Post a sample of the code you wrote

Kissema commented 1 year ago

I have the same issue. How can I solve it?

Kissema commented 1 year ago

@safeer-in I has the same issue, I have a work arround that works.

adding a in style.css the material date content style .mat-datepicker-content-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); }

mbsh-code commented 1 year ago

@Kissema This style is not perfect The top sections and calendar days have different styles Write if you have a complete display or someone has another solution

solarisy commented 1 year ago

Hello I also have this problem

daffaharizaleid commented 1 year ago

Hello I also have this problem

AlexanderZhukCoherent commented 1 year ago

just the same issue. using a horrible workaround for now, to programmatically open visually hidden mat-datepicker on view init, and then close it, but need a normal solution by the lib creator.

eyoeldefare commented 1 year ago

It seems to work sometimes if you also import MatDatepickerModule, MatNativeDateModule

klaydze commented 1 year ago

just the same issue. using a horrible workaround for now, to programmatically open visually hidden mat-datepicker on view init, and then close it, but need a normal solution by the lib creator.

Hey, can you share how you do it?

mbsh-code commented 1 year ago

It seems to work sometimes if you also import MatDatepickerModule, MatNativeDateModule

Not working

tsaliu commented 1 year ago

Reverting @angular/material to ~16.1.0 works for me

TheDeadCode commented 1 year ago

Still persists on @angular/material 16.2.7

daffaharizaleid commented 1 year ago

Reverting @angular/material to ~16.1.0 works for me

how to revert? change in Package.json and then delete package.lock.json and node_modules folder? and then npm install?

Low-Signal commented 1 year ago

Reverting @angular/material to ~16.1.0 works for me

how to revert? change in Package.json and then delete package.lock.json and node_modules folder? and then npm install?

Yes that is one way to revert, you can also change the package.json and use npm update. If there are issues you can delete package.lock.json and the node_modules folder and use npm install.

To get it to work you need to change the cdk and material packages to this: "@angular/cdk": "16.1.8", "@angular/material": "16.1.8"

You can also put a '~' in front of them but that just prevents it from going to 16.2 and since 16.1.8 is the last minor release this will not change anything.

francobasilico commented 1 year ago

anyone know any other alternatives for datetime pickers?

casterweb commented 1 year ago

I found a temporary solution to this problem (a crutch). The problem with styles is that the styles that are loaded from the library are in the wrong order. We are loading into the head with this image: 1.mat-datepicker-content... 2.mat-calendar... 3.ngx-mat-timepicker... 4.mat-calendar-body... If the creator of the library can change the sequence to : 1.mat-datepicker-content... 2.mat-calendar... 3.mat-calendar-body... 4.ngx-mat-timepicker... then the problem with styles will be solved by itself. my solution was this: I added small styles to the main blocks and completely copied the style from the mat-calendar-body and imported it into my component. If the inspect checks which styles are loaded and which are not, you can easily find everything right away. I hope I explained it clearly and you can at least temporarily solve this problem.

rewento commented 1 year ago

Assuming the use of @angular/material@^16, the CSS rules below are the contents of four stylesheets that are pushed onto globalThis.document.styleSheets when the first \<mat-datepicker-content> component of a host Angular app is instantiated. (That typically occurs after the first click of a \<mat-datepicker-toggle> component.)

Apparently, an \<ngx-mat-datepicker-content> component relies on one or more of these rules for proper presentation. The stylesheets pushed onto globalThis.document.styleSheets with the first instantiation of an \<ngx-mat-datepicker-content> component omit copies or equivalents of those rules, whichever ones they are. That's the origin of this issue.

Copying these rules (or the subset of them that fail to be applied for \<ngx-mat-datepicker-content> component instances) into a global stylesheet of the host Angular app is a workaround for this bug.

.mat-datepicker-toggle {
    pointer-events: auto;
    color: var(--mat-datepicker-toggle-icon-color);
}

.mat-datepicker-toggle-active {
    color: var(--mat-datepicker-toggle-active-state-icon-color);
}

.cdk-high-contrast-active .mat-datepicker-toggle-default-icon {
    color: canvastext;
}

.mat-datepicker-content {
    box-shadow:
        rgb(0 0 0 / 20%) 0 2px 4px -1px,
        rgb(0 0 0 / 14%) 0 4px 5px 0,
        rgb(0 0 0 / 12%) 0 1px 10px 0;
    display: block;
    border-radius: 4px;
    background-color: var(--mat-datepicker-calendar-container-background-color);
    color: var(--mat-datepicker-calendar-container-text-color);
}

.mat-datepicker-content .mat-calendar {
    width: 296px;
    height: 354px;
}

.mat-datepicker-content
    .mat-datepicker-content-container-with-custom-header
    .mat-calendar {
    height: auto;
}

.mat-datepicker-content .mat-datepicker-close-button {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
}

.ng-animating .mat-datepicker-content .mat-datepicker-close-button {
    display: none;
}

.mat-datepicker-content-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mat-datepicker-content-touch {
    box-shadow:
        rgb(0 0 0 / 20%) 0 11px 15px -7px,
        rgb(0 0 0 / 14%) 0 24px 38px 3px,
        rgb(0 0 0 / 12%) 0 9px 46px 8px;
    display: block;
    max-height: 80vh;
    position: relative;
    overflow: visible;
}

.mat-datepicker-content-touch .mat-datepicker-content-container {
    min-height: 312px;
    max-height: 788px;
    min-width: 250px;
    max-width: 750px;
}

.mat-datepicker-content-touch .mat-calendar {
    width: 100%;
    height: auto;
}
@media (orientation: landscape) {
    .mat-datepicker-content-touch .mat-datepicker-content-container {
        width: 64vh;
        height: 80vh;
    }
}
@media (orientation: portrait) {
    .mat-datepicker-content-touch .mat-datepicker-content-container {
        width: 80vw;
        height: 100vw;
    }

    .mat-datepicker-content-touch
        .mat-datepicker-content-container-with-actions {
        height: 115vw;
    }
}

.mat-calendar {
    display: block;
    font-family: var(--mat-datepicker-calendar-text-font);
    font-size: var(--mat-datepicker-calendar-text-size);
}

.mat-calendar-header {
    padding: 8px 8px 0;
}

.mat-calendar-content {
    padding: 0 8px 8px;
    outline: none;
}

.mat-calendar-controls {
    display: flex;
    align-items: center;
    margin: 5% calc(4.71429% - 16px);
}

.mat-calendar-spacer {
    flex: 1 1 auto;
}

.mat-calendar-period-button {
    min-width: 0;
    margin: 0 8px;
    font-size: var(--mat-datepicker-calendar-period-button-text-size);
    font-weight: var(--mat-datepicker-calendar-period-button-text-weight);
}

.mat-calendar-arrow {
    display: inline-block;
    width: 10px;
    height: 5px;
    margin: 0 0 0 5px;
    vertical-align: middle;
    fill: var(--mat-datepicker-calendar-period-button-icon-color);
}

.mat-calendar-arrow.mat-calendar-invert {
    transform: rotate(180deg);
}

[dir='rtl'] .mat-calendar-arrow {
    margin: 0 5px 0 0;
}

.cdk-high-contrast-active .mat-calendar-arrow {
    fill: canvastext;
}

.mat-calendar-previous-button,
.mat-calendar-next-button {
    position: relative;
}

.mat-datepicker-content .mat-calendar-previous-button,
.mat-datepicker-content .mat-calendar-next-button {
    color: var(--mat-datepicker-calendar-navigation-button-icon-color);
}

.mat-calendar-previous-button::after,
.mat-calendar-next-button::after {
    inset: 0;
    position: absolute;
    content: '';
    margin: 15.5px;
    border-width: 2px 0 0;
    border-style: solid;
    border-color: currentColor;
    border-image: initial;
}

[dir='rtl'] .mat-calendar-previous-button,
[dir='rtl'] .mat-calendar-next-button {
    transform: rotate(180deg);
}

.mat-calendar-previous-button::after {
    border-left-width: 2px;
    transform: translateX(2px) rotate(-45deg);
}

.mat-calendar-next-button::after {
    border-right-width: 2px;
    transform: translateX(-2px) rotate(45deg);
}

.mat-calendar-table {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
}

.mat-calendar-table-header th {
    text-align: center;
    padding: 0 0 8px;
    color: var(--mat-datepicker-calendar-header-text-color);
    font-size: var(--mat-datepicker-calendar-header-text-size);
    font-weight: var(--mat-datepicker-calendar-header-text-weight);
}

.mat-calendar-table-header-divider {
    position: relative;
    height: 1px;
}

.mat-calendar-table-header-divider::after {
    content: '';
    position: absolute;
    top: 0;
    left: -8px;
    right: -8px;
    height: 1px;
    background: var(--mat-datepicker-calendar-header-divider-color);
}

.mat-calendar-body-cell-content::before {
    margin: calc(calc(var(--mat-focus-indicator-border-width, 3px) + 3px) * -1);
}

.mat-calendar-body-cell:focus .mat-focus-indicator::before {
    content: '';
}

.mat-calendar-hidden-label {
    display: none;
}

.mat-calendar-body {
    min-width: 224px;
}

.mat-calendar-body-today:not(
        .mat-calendar-body-selected,
        .mat-calendar-body-comparison-identical
    ) {
    border-color: var(--mat-datepicker-calendar-date-today-outline-color);
}

.mat-calendar-body-label {
    height: 0;
    line-height: 0;
    text-align: left;
    padding-left: 4.71429%;
    padding-right: 4.71429%;
    font-size: var(--mat-datepicker-calendar-body-label-text-size);
    font-weight: var(--mat-datepicker-calendar-body-label-text-weight);
    color: var(--mat-datepicker-calendar-body-label-text-color);
}

.mat-calendar-body-hidden-label {
    display: none;
}

.mat-calendar-body-cell-container {
    position: relative;
    height: 0;
    line-height: 0;
}

.mat-calendar-body-cell {
    user-select: none;
    cursor: pointer;
    border: none;
    -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none;
    text-align: center;
    outline: none;
    font-family: inherit;
    margin: 0;
}

.mat-calendar-body-cell::before,
.mat-calendar-body-cell::after,
.mat-calendar-body-cell-preview {
    content: '';
    position: absolute;
    top: 5%;
    left: 0;
    z-index: 0;
    box-sizing: border-box;
    display: block;
    height: 90%;
    width: 100%;
}

.mat-calendar-body-range-start:not(
        .mat-calendar-body-in-comparison-range
    )::before,
.mat-calendar-body-range-start::after,
.mat-calendar-body-comparison-start:not(
        .mat-calendar-body-comparison-bridge-start
    )::before,
.mat-calendar-body-comparison-start::after,
.mat-calendar-body-preview-start .mat-calendar-body-cell-preview {
    left: 5%;
    width: 95%;
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}

[dir='rtl']
    .mat-calendar-body-range-start:not(
        .mat-calendar-body-in-comparison-range
    )::before,
[dir='rtl'] .mat-calendar-body-range-start::after,
[dir='rtl']
    .mat-calendar-body-comparison-start:not(
        .mat-calendar-body-comparison-bridge-start
    )::before,
[dir='rtl'] .mat-calendar-body-comparison-start::after,
[dir='rtl'] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview {
    left: 0;
    border-radius: 0 999px 999px 0;
}

.mat-calendar-body-range-end:not(
        .mat-calendar-body-in-comparison-range
    )::before,
.mat-calendar-body-range-end::after,
.mat-calendar-body-comparison-end:not(
        .mat-calendar-body-comparison-bridge-end
    )::before,
.mat-calendar-body-comparison-end::after,
.mat-calendar-body-preview-end .mat-calendar-body-cell-preview {
    width: 95%;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}

[dir='rtl']
    .mat-calendar-body-range-end:not(
        .mat-calendar-body-in-comparison-range
    )::before,
[dir='rtl'] .mat-calendar-body-range-end::after,
[dir='rtl']
    .mat-calendar-body-comparison-end:not(
        .mat-calendar-body-comparison-bridge-end
    )::before,
[dir='rtl'] .mat-calendar-body-comparison-end::after,
[dir='rtl'] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview {
    left: 5%;
    border-radius: 999px 0 0 999px;
}

[dir='rtl']
    .mat-calendar-body-comparison-bridge-start.mat-calendar-body-range-end::after,
[dir='rtl']
    .mat-calendar-body-comparison-bridge-end.mat-calendar-body-range-start::after {
    width: 95%;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}

.mat-calendar-body-comparison-start.mat-calendar-body-range-end::after,
[dir='rtl']
    .mat-calendar-body-comparison-start.mat-calendar-body-range-end::after,
.mat-calendar-body-comparison-end.mat-calendar-body-range-start::after,
[dir='rtl']
    .mat-calendar-body-comparison-end.mat-calendar-body-range-start::after {
    width: 90%;
}

.mat-calendar-body-in-preview {
    color: var(--mat-datepicker-calendar-date-preview-state-outline-color);
}

.mat-calendar-body-in-preview .mat-calendar-body-cell-preview {
    border-top: 1px dashed;
    border-bottom: 1px dashed;
}

.mat-calendar-body-preview-start .mat-calendar-body-cell-preview {
    border-left: 1px dashed;
}

[dir='rtl'] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview {
    border-left: 0;
    border-right: 1px dashed;
}

.mat-calendar-body-preview-end .mat-calendar-body-cell-preview {
    border-right: 1px dashed;
}

[dir='rtl'] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview {
    border-right: 0;
    border-left: 1px dashed;
}

.mat-calendar-body-disabled {
    cursor: default;
}

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

.mat-calendar-body-disabled
    > .mat-calendar-body-today:not(
        .mat-calendar-body-selected,
        .mat-calendar-body-comparison-identical
    ) {
    border-color: var(
        --mat-datepicker-calendar-date-today-disabled-state-outline-color
    );
}

.cdk-high-contrast-active .mat-calendar-body-disabled {
    opacity: 0.5;
}

.mat-calendar-body-cell-content {
    top: 5%;
    left: 5%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 90%;
    height: 90%;
    line-height: 1;
    border-width: 1px;
    border-style: solid;
    border-radius: 999px;
    color: var(--mat-datepicker-calendar-date-text-color);
    border-color: var(--mat-datepicker-calendar-date-outline-color);
}

.mat-calendar-body-cell-content.mat-focus-indicator {
    position: absolute;
}

.cdk-high-contrast-active .mat-calendar-body-cell-content {
    border: none;
}

.cdk-keyboard-focused
    .mat-calendar-body-active
    > .mat-calendar-body-cell-content:not(
        .mat-calendar-body-selected,
        .mat-calendar-body-comparison-identical
    ),
.cdk-program-focused
    .mat-calendar-body-active
    > .mat-calendar-body-cell-content:not(
        .mat-calendar-body-selected,
        .mat-calendar-body-comparison-identical
    ) {
    background-color: var(
        --mat-datepicker-calendar-date-focus-state-background-color
    );
}
@media (hover: hover) {
    .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover
        > .mat-calendar-body-cell-content:not(
            .mat-calendar-body-selected,
            .mat-calendar-body-comparison-identical
        ) {
        background-color: var(
            --mat-datepicker-calendar-date-hover-state-background-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-disabled > .mat-calendar-body-selected {
    background-color: var(
        --mat-datepicker-calendar-date-selected-disabled-state-background-color
    );
}

.mat-calendar-body-selected.mat-calendar-body-today {
    box-shadow: inset 0 0 0 1px
        var(--mat-datepicker-calendar-date-today-selected-state-outline-color);
}

.mat-calendar-body-in-range::before {
    background: var(
        --mat-datepicker-calendar-date-in-range-state-background-color
    );
}

.mat-calendar-body-comparison-identical,
.mat-calendar-body-in-comparison-range::before {
    background: var(
        --mat-datepicker-calendar-date-in-comparison-range-state-background-color
    );
}

.mat-calendar-body-comparison-identical,
.mat-calendar-body-in-comparison-range::before {
    background: var(
        --mat-datepicker-calendar-date-in-comparison-range-state-background-color
    );
}

.mat-calendar-body-comparison-bridge-start::before,
[dir='rtl'] .mat-calendar-body-comparison-bridge-end::before {
    background: linear-gradient(
        to right,
        var(--mat-datepicker-calendar-date-in-range-state-background-color) 50%,
        var(
                --mat-datepicker-calendar-date-in-comparison-range-state-background-color
            )
            50%
    );
}

.mat-calendar-body-comparison-bridge-end::before,
[dir='rtl'] .mat-calendar-body-comparison-bridge-start::before {
    background: linear-gradient(
        to left,
        var(--mat-datepicker-calendar-date-in-range-state-background-color) 50%,
        var(
                --mat-datepicker-calendar-date-in-comparison-range-state-background-color
            )
            50%
    );
}

.mat-calendar-body-in-range > .mat-calendar-body-comparison-identical,
.mat-calendar-body-in-comparison-range.mat-calendar-body-in-range::after {
    background: var(
        --mat-datepicker-calendar-date-in-overlap-range-state-background-color
    );
}

.mat-calendar-body-comparison-identical.mat-calendar-body-selected,
.mat-calendar-body-in-comparison-range > .mat-calendar-body-selected {
    background: var(
        --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color
    );
}

.cdk-high-contrast-active .mat-datepicker-popup:not(:empty),
.cdk-high-contrast-active
    .mat-calendar-body-cell:not(.mat-calendar-body-in-range)
    .mat-calendar-body-selected {
    outline: solid 1px;
}

.cdk-high-contrast-active .mat-calendar-body-today {
    outline: dotted 1px;
}

.cdk-high-contrast-active .mat-calendar-body-cell::before,
.cdk-high-contrast-active .mat-calendar-body-cell::after,
.cdk-high-contrast-active .mat-calendar-body-selected {
    background: none;
}

.cdk-high-contrast-active .mat-calendar-body-in-range::before,
.cdk-high-contrast-active .mat-calendar-body-comparison-bridge-start::before,
.cdk-high-contrast-active .mat-calendar-body-comparison-bridge-end::before {
    border-top: 1px solid;
    border-bottom: 1px solid;
}

.cdk-high-contrast-active .mat-calendar-body-range-start::before {
    border-left: 1px solid;
}

[dir='rtl'] .cdk-high-contrast-active .mat-calendar-body-range-start::before {
    border-left: 0;
    border-right: 1px solid;
}

.cdk-high-contrast-active .mat-calendar-body-range-end::before {
    border-right: 1px solid;
}

[dir='rtl'] .cdk-high-contrast-active .mat-calendar-body-range-end::before {
    border-right: 0;
    border-left: 1px solid;
}

.cdk-high-contrast-active .mat-calendar-body-in-comparison-range::before {
    border-top: 1px dashed;
    border-bottom: 1px dashed;
}

.cdk-high-contrast-active .mat-calendar-body-comparison-start::before {
    border-left: 1px dashed;
}

[dir='rtl']
    .cdk-high-contrast-active
    .mat-calendar-body-comparison-start::before {
    border-left: 0;
    border-right: 1px dashed;
}

.cdk-high-contrast-active .mat-calendar-body-comparison-end::before {
    border-right: 1px dashed;
}

[dir='rtl']
    .cdk-high-contrast-active
    .mat-calendar-body-comparison-end::before {
    border-right: 0;
    border-left: 1px dashed;
}

[dir='rtl'] .mat-calendar-body-label {
    text-align: right;
}

Tamarpe commented 1 year ago

Reverting @angular/material to ~16.1.0 works for me

how to revert? change in Package.json and then delete package.lock.json and node_modules folder? and then npm install?

Yes that is one way to revert, you can also change the package.json and use npm update. If there are issues you can delete package.lock.json and the node_modules folder and use npm install.

To get it to work you need to change the cdk and material packages to this: "@angular/cdk": "16.1.8", "@angular/material": "16.1.8"

You can also put a '~' in front of them but that just prevents it from going to 16.2 and since 16.1.8 is the last minor release this will not change anything.

I have the same issue. This workaround works for me, thx!

ioanbin commented 1 year ago

Hello, any updates for this issue?

AlexElin commented 11 months ago

Reverting @angular/material to ~16.1.0 works for me

Why does it work in @angular/material v16.1, but is broken in v16.2?

AlexElin commented 11 months ago

duplicate of https://github.com/h2qutc/angular-material-components/issues/348

techraiders commented 1 week ago

Assuming the use of @angular/material@^16, the CSS rules below are the contents of four stylesheets that are pushed onto globalThis.document.styleSheets when the first component of a host Angular app is instantiated. (That typically occurs after the first click of a component.)

Apparently, an component relies on one or more of these rules for proper presentation. The stylesheets pushed onto globalThis.document.styleSheets with the first instantiation of an component omit copies or equivalents of those rules, whichever ones they are. That's the origin of this issue.

Copying these rules (or the subset of them that fail to be applied for component instances) into a global stylesheet of the host Angular app is a workaround for this bug.

.mat-datepicker-toggle {
    pointer-events: auto;
    color: var(--mat-datepicker-toggle-icon-color);
}

.mat-datepicker-toggle-active {
    color: var(--mat-datepicker-toggle-active-state-icon-color);
}

.cdk-high-contrast-active .mat-datepicker-toggle-default-icon {
    color: canvastext;
}

.mat-datepicker-content {
    box-shadow:
        rgb(0 0 0 / 20%) 0 2px 4px -1px,
        rgb(0 0 0 / 14%) 0 4px 5px 0,
        rgb(0 0 0 / 12%) 0 1px 10px 0;
    display: block;
    border-radius: 4px;
    background-color: var(--mat-datepicker-calendar-container-background-color);
    color: var(--mat-datepicker-calendar-container-text-color);
}

.mat-datepicker-content .mat-calendar {
    width: 296px;
    height: 354px;
}

.mat-datepicker-content
    .mat-datepicker-content-container-with-custom-header
    .mat-calendar {
    height: auto;
}

.mat-datepicker-content .mat-datepicker-close-button {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
}

.ng-animating .mat-datepicker-content .mat-datepicker-close-button {
    display: none;
}

.mat-datepicker-content-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mat-datepicker-content-touch {
    box-shadow:
        rgb(0 0 0 / 20%) 0 11px 15px -7px,
        rgb(0 0 0 / 14%) 0 24px 38px 3px,
        rgb(0 0 0 / 12%) 0 9px 46px 8px;
    display: block;
    max-height: 80vh;
    position: relative;
    overflow: visible;
}

.mat-datepicker-content-touch .mat-datepicker-content-container {
    min-height: 312px;
    max-height: 788px;
    min-width: 250px;
    max-width: 750px;
}

.mat-datepicker-content-touch .mat-calendar {
    width: 100%;
    height: auto;
}
@media (orientation: landscape) {
    .mat-datepicker-content-touch .mat-datepicker-content-container {
        width: 64vh;
        height: 80vh;
    }
}
@media (orientation: portrait) {
    .mat-datepicker-content-touch .mat-datepicker-content-container {
        width: 80vw;
        height: 100vw;
    }

    .mat-datepicker-content-touch
        .mat-datepicker-content-container-with-actions {
        height: 115vw;
    }
}

.mat-calendar {
    display: block;
    font-family: var(--mat-datepicker-calendar-text-font);
    font-size: var(--mat-datepicker-calendar-text-size);
}

.mat-calendar-header {
    padding: 8px 8px 0;
}

.mat-calendar-content {
    padding: 0 8px 8px;
    outline: none;
}

.mat-calendar-controls {
    display: flex;
    align-items: center;
    margin: 5% calc(4.71429% - 16px);
}

.mat-calendar-spacer {
    flex: 1 1 auto;
}

.mat-calendar-period-button {
    min-width: 0;
    margin: 0 8px;
    font-size: var(--mat-datepicker-calendar-period-button-text-size);
    font-weight: var(--mat-datepicker-calendar-period-button-text-weight);
}

.mat-calendar-arrow {
    display: inline-block;
    width: 10px;
    height: 5px;
    margin: 0 0 0 5px;
    vertical-align: middle;
    fill: var(--mat-datepicker-calendar-period-button-icon-color);
}

.mat-calendar-arrow.mat-calendar-invert {
    transform: rotate(180deg);
}

[dir='rtl'] .mat-calendar-arrow {
    margin: 0 5px 0 0;
}

.cdk-high-contrast-active .mat-calendar-arrow {
    fill: canvastext;
}

.mat-calendar-previous-button,
.mat-calendar-next-button {
    position: relative;
}

.mat-datepicker-content .mat-calendar-previous-button,
.mat-datepicker-content .mat-calendar-next-button {
    color: var(--mat-datepicker-calendar-navigation-button-icon-color);
}

.mat-calendar-previous-button::after,
.mat-calendar-next-button::after {
    inset: 0;
    position: absolute;
    content: '';
    margin: 15.5px;
    border-width: 2px 0 0;
    border-style: solid;
    border-color: currentColor;
    border-image: initial;
}

[dir='rtl'] .mat-calendar-previous-button,
[dir='rtl'] .mat-calendar-next-button {
    transform: rotate(180deg);
}

.mat-calendar-previous-button::after {
    border-left-width: 2px;
    transform: translateX(2px) rotate(-45deg);
}

.mat-calendar-next-button::after {
    border-right-width: 2px;
    transform: translateX(-2px) rotate(45deg);
}

.mat-calendar-table {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
}

.mat-calendar-table-header th {
    text-align: center;
    padding: 0 0 8px;
    color: var(--mat-datepicker-calendar-header-text-color);
    font-size: var(--mat-datepicker-calendar-header-text-size);
    font-weight: var(--mat-datepicker-calendar-header-text-weight);
}

.mat-calendar-table-header-divider {
    position: relative;
    height: 1px;
}

.mat-calendar-table-header-divider::after {
    content: '';
    position: absolute;
    top: 0;
    left: -8px;
    right: -8px;
    height: 1px;
    background: var(--mat-datepicker-calendar-header-divider-color);
}

.mat-calendar-body-cell-content::before {
    margin: calc(calc(var(--mat-focus-indicator-border-width, 3px) + 3px) * -1);
}

.mat-calendar-body-cell:focus .mat-focus-indicator::before {
    content: '';
}

.mat-calendar-hidden-label {
    display: none;
}

.mat-calendar-body {
    min-width: 224px;
}

.mat-calendar-body-today:not(
        .mat-calendar-body-selected,
        .mat-calendar-body-comparison-identical
    ) {
    border-color: var(--mat-datepicker-calendar-date-today-outline-color);
}

.mat-calendar-body-label {
    height: 0;
    line-height: 0;
    text-align: left;
    padding-left: 4.71429%;
    padding-right: 4.71429%;
    font-size: var(--mat-datepicker-calendar-body-label-text-size);
    font-weight: var(--mat-datepicker-calendar-body-label-text-weight);
    color: var(--mat-datepicker-calendar-body-label-text-color);
}

.mat-calendar-body-hidden-label {
    display: none;
}

.mat-calendar-body-cell-container {
    position: relative;
    height: 0;
    line-height: 0;
}

.mat-calendar-body-cell {
    user-select: none;
    cursor: pointer;
    border: none;
    -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none;
    text-align: center;
    outline: none;
    font-family: inherit;
    margin: 0;
}

.mat-calendar-body-cell::before,
.mat-calendar-body-cell::after,
.mat-calendar-body-cell-preview {
    content: '';
    position: absolute;
    top: 5%;
    left: 0;
    z-index: 0;
    box-sizing: border-box;
    display: block;
    height: 90%;
    width: 100%;
}

.mat-calendar-body-range-start:not(
        .mat-calendar-body-in-comparison-range
    )::before,
.mat-calendar-body-range-start::after,
.mat-calendar-body-comparison-start:not(
        .mat-calendar-body-comparison-bridge-start
    )::before,
.mat-calendar-body-comparison-start::after,
.mat-calendar-body-preview-start .mat-calendar-body-cell-preview {
    left: 5%;
    width: 95%;
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}

[dir='rtl']
    .mat-calendar-body-range-start:not(
        .mat-calendar-body-in-comparison-range
    )::before,
[dir='rtl'] .mat-calendar-body-range-start::after,
[dir='rtl']
    .mat-calendar-body-comparison-start:not(
        .mat-calendar-body-comparison-bridge-start
    )::before,
[dir='rtl'] .mat-calendar-body-comparison-start::after,
[dir='rtl'] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview {
    left: 0;
    border-radius: 0 999px 999px 0;
}

.mat-calendar-body-range-end:not(
        .mat-calendar-body-in-comparison-range
    )::before,
.mat-calendar-body-range-end::after,
.mat-calendar-body-comparison-end:not(
        .mat-calendar-body-comparison-bridge-end
    )::before,
.mat-calendar-body-comparison-end::after,
.mat-calendar-body-preview-end .mat-calendar-body-cell-preview {
    width: 95%;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}

[dir='rtl']
    .mat-calendar-body-range-end:not(
        .mat-calendar-body-in-comparison-range
    )::before,
[dir='rtl'] .mat-calendar-body-range-end::after,
[dir='rtl']
    .mat-calendar-body-comparison-end:not(
        .mat-calendar-body-comparison-bridge-end
    )::before,
[dir='rtl'] .mat-calendar-body-comparison-end::after,
[dir='rtl'] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview {
    left: 5%;
    border-radius: 999px 0 0 999px;
}

[dir='rtl']
    .mat-calendar-body-comparison-bridge-start.mat-calendar-body-range-end::after,
[dir='rtl']
    .mat-calendar-body-comparison-bridge-end.mat-calendar-body-range-start::after {
    width: 95%;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}

.mat-calendar-body-comparison-start.mat-calendar-body-range-end::after,
[dir='rtl']
    .mat-calendar-body-comparison-start.mat-calendar-body-range-end::after,
.mat-calendar-body-comparison-end.mat-calendar-body-range-start::after,
[dir='rtl']
    .mat-calendar-body-comparison-end.mat-calendar-body-range-start::after {
    width: 90%;
}

.mat-calendar-body-in-preview {
    color: var(--mat-datepicker-calendar-date-preview-state-outline-color);
}

.mat-calendar-body-in-preview .mat-calendar-body-cell-preview {
    border-top: 1px dashed;
    border-bottom: 1px dashed;
}

.mat-calendar-body-preview-start .mat-calendar-body-cell-preview {
    border-left: 1px dashed;
}

[dir='rtl'] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview {
    border-left: 0;
    border-right: 1px dashed;
}

.mat-calendar-body-preview-end .mat-calendar-body-cell-preview {
    border-right: 1px dashed;
}

[dir='rtl'] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview {
    border-right: 0;
    border-left: 1px dashed;
}

.mat-calendar-body-disabled {
    cursor: default;
}

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

.mat-calendar-body-disabled
    > .mat-calendar-body-today:not(
        .mat-calendar-body-selected,
        .mat-calendar-body-comparison-identical
    ) {
    border-color: var(
        --mat-datepicker-calendar-date-today-disabled-state-outline-color
    );
}

.cdk-high-contrast-active .mat-calendar-body-disabled {
    opacity: 0.5;
}

.mat-calendar-body-cell-content {
    top: 5%;
    left: 5%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 90%;
    height: 90%;
    line-height: 1;
    border-width: 1px;
    border-style: solid;
    border-radius: 999px;
    color: var(--mat-datepicker-calendar-date-text-color);
    border-color: var(--mat-datepicker-calendar-date-outline-color);
}

.mat-calendar-body-cell-content.mat-focus-indicator {
    position: absolute;
}

.cdk-high-contrast-active .mat-calendar-body-cell-content {
    border: none;
}

.cdk-keyboard-focused
    .mat-calendar-body-active
    > .mat-calendar-body-cell-content:not(
        .mat-calendar-body-selected,
        .mat-calendar-body-comparison-identical
    ),
.cdk-program-focused
    .mat-calendar-body-active
    > .mat-calendar-body-cell-content:not(
        .mat-calendar-body-selected,
        .mat-calendar-body-comparison-identical
    ) {
    background-color: var(
        --mat-datepicker-calendar-date-focus-state-background-color
    );
}
@media (hover: hover) {
    .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover
        > .mat-calendar-body-cell-content:not(
            .mat-calendar-body-selected,
            .mat-calendar-body-comparison-identical
        ) {
        background-color: var(
            --mat-datepicker-calendar-date-hover-state-background-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-disabled > .mat-calendar-body-selected {
    background-color: var(
        --mat-datepicker-calendar-date-selected-disabled-state-background-color
    );
}

.mat-calendar-body-selected.mat-calendar-body-today {
    box-shadow: inset 0 0 0 1px
        var(--mat-datepicker-calendar-date-today-selected-state-outline-color);
}

.mat-calendar-body-in-range::before {
    background: var(
        --mat-datepicker-calendar-date-in-range-state-background-color
    );
}

.mat-calendar-body-comparison-identical,
.mat-calendar-body-in-comparison-range::before {
    background: var(
        --mat-datepicker-calendar-date-in-comparison-range-state-background-color
    );
}

.mat-calendar-body-comparison-identical,
.mat-calendar-body-in-comparison-range::before {
    background: var(
        --mat-datepicker-calendar-date-in-comparison-range-state-background-color
    );
}

.mat-calendar-body-comparison-bridge-start::before,
[dir='rtl'] .mat-calendar-body-comparison-bridge-end::before {
    background: linear-gradient(
        to right,
        var(--mat-datepicker-calendar-date-in-range-state-background-color) 50%,
        var(
                --mat-datepicker-calendar-date-in-comparison-range-state-background-color
            )
            50%
    );
}

.mat-calendar-body-comparison-bridge-end::before,
[dir='rtl'] .mat-calendar-body-comparison-bridge-start::before {
    background: linear-gradient(
        to left,
        var(--mat-datepicker-calendar-date-in-range-state-background-color) 50%,
        var(
                --mat-datepicker-calendar-date-in-comparison-range-state-background-color
            )
            50%
    );
}

.mat-calendar-body-in-range > .mat-calendar-body-comparison-identical,
.mat-calendar-body-in-comparison-range.mat-calendar-body-in-range::after {
    background: var(
        --mat-datepicker-calendar-date-in-overlap-range-state-background-color
    );
}

.mat-calendar-body-comparison-identical.mat-calendar-body-selected,
.mat-calendar-body-in-comparison-range > .mat-calendar-body-selected {
    background: var(
        --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color
    );
}

.cdk-high-contrast-active .mat-datepicker-popup:not(:empty),
.cdk-high-contrast-active
    .mat-calendar-body-cell:not(.mat-calendar-body-in-range)
    .mat-calendar-body-selected {
    outline: solid 1px;
}

.cdk-high-contrast-active .mat-calendar-body-today {
    outline: dotted 1px;
}

.cdk-high-contrast-active .mat-calendar-body-cell::before,
.cdk-high-contrast-active .mat-calendar-body-cell::after,
.cdk-high-contrast-active .mat-calendar-body-selected {
    background: none;
}

.cdk-high-contrast-active .mat-calendar-body-in-range::before,
.cdk-high-contrast-active .mat-calendar-body-comparison-bridge-start::before,
.cdk-high-contrast-active .mat-calendar-body-comparison-bridge-end::before {
    border-top: 1px solid;
    border-bottom: 1px solid;
}

.cdk-high-contrast-active .mat-calendar-body-range-start::before {
    border-left: 1px solid;
}

[dir='rtl'] .cdk-high-contrast-active .mat-calendar-body-range-start::before {
    border-left: 0;
    border-right: 1px solid;
}

.cdk-high-contrast-active .mat-calendar-body-range-end::before {
    border-right: 1px solid;
}

[dir='rtl'] .cdk-high-contrast-active .mat-calendar-body-range-end::before {
    border-right: 0;
    border-left: 1px solid;
}

.cdk-high-contrast-active .mat-calendar-body-in-comparison-range::before {
    border-top: 1px dashed;
    border-bottom: 1px dashed;
}

.cdk-high-contrast-active .mat-calendar-body-comparison-start::before {
    border-left: 1px dashed;
}

[dir='rtl']
    .cdk-high-contrast-active
    .mat-calendar-body-comparison-start::before {
    border-left: 0;
    border-right: 1px dashed;
}

.cdk-high-contrast-active .mat-calendar-body-comparison-end::before {
    border-right: 1px dashed;
}

[dir='rtl']
    .cdk-high-contrast-active
    .mat-calendar-body-comparison-end::before {
    border-right: 0;
    border-left: 1px dashed;
}

[dir='rtl'] .mat-calendar-body-label {
    text-align: right;
}

Wow! Super! Thanks a bunch buddy. This works. Amazing.

h2qutc / angular-material-components

Date time picker style not loading initially.. but works after opening normal material date picker Angular 16 #357