CODEWITHSUNDEEP
angular-materialangular15
Sneha
Sneha

Reputation: 131

ngx-mat-datetime-picker not displaying time after migrating from angular12 to angular15 version

We have migrated our angular11 project to angular15 version, and we have upgraded angular material version to 15 version. In angular11 version date picker was working fine,but after upgrading it is not displaying time

<div>
    <mat-form-field class="date-picker" appearance="outline">
        <mat-label>From</mat-label>
        <input id="from_date" matInput [ngxMatDatetimePicker]="frompicker" 
           [(ngModel)]="fromDate"
            (ngModelChange)="onFromToChanged()">
        <mat-datepicker-toggle matSuffix [for]="frompicker"></mat-datepicker-toggle>
        <ngx-mat-datetime-picker #frompicker>
        </ngx-mat-datetime-picker>
    </mat-form-field>
    
    <mat-form-field class="date-picker" appearance="outline">
        <mat-label>To</mat-label>
        <input id="toDate" matInput [ngxMatDatetimePicker]="topicker" 
            [(ngModel)]="toDate"
            (ngModelChange)="onFromToChanged()">
        <mat-datepicker-toggle matSuffix [for]="topicker"></mat-datepicker-toggle>
        <ngx-mat-datetime-picker #topicker [enableMeridian]="enableMeridian"></ngx-mat-datetime-picker>
    </mat-form-field>
</div>

this is our code, and in angular11 version it was working like this

enter image description here

but after migration getting like this, time not displaying and there is no tick button.

enter image description here

can anyone help me to figure out the issue

Upvotes: 0

Views: 1610

Answers (3)

Hamid
Hamid

Reputation: 897

I added the below style and display problem fixed for me!

    ngx-mat-timepicker {
        .mat-mdc-form-field-flex {
            padding: 0 !important;
        }
    }

Upvotes: 1

Olivier Boiss&#233;
Olivier Boiss&#233;

Reputation: 18143

This is because defaultTime input is no longer used in NgxMatTimepickerComponent

@Input() defaultTime: number[]; is declared but no longer used in the component.

It seems to be a regression from this commit where this instruction this._dateAdapter.setTimeByDefaultValues(this._model, this.defaultTime); has been removed

You can add manually a button using the directive ngxMatDatepickerApply, you can see an example in the documentation

<ngx-mat-datetime-picker #picker>
  <ngx-mat-datepicker-actions>
    <button mat-raised-button color="primary" ngxMatDatepickerApply>Apply</button>
  </ngx-mat-datepicker-actions>
</ngx-mat-datetime-picker>

Upvotes: 0

gluecksmelodie
gluecksmelodie

Reputation: 61

Since the error appears within the time picker part (which is not part of the Angular Material datepicker component), I suppose that the problem is not within Angular Material's datepicker, but with the component from an external library ngx-mat-datetime-picker.

That library is deprecated and, according to the docs, it was only supported until Angular Material v9.

Upvotes: 0

Related Questions