'ngx-mat-datetime-picker changes format unexpected

I am using ngx-mat-datetime-picker in the following way:

HTML:

<mat-form-field>
          <input matInput [ngxMatDatetimePicker]="picker"  placeholder="Choose a date & time" ng-readonly="true">
          
          <mat-datepicker-toggle matSuffix [for]="$any(picker)"></mat-datepicker-toggle>
      
          <ngx-mat-datetime-picker #picker></ngx-mat-datetime-picker>
      </mat-form-field>

app.module.ts

export const MY_FORMAT = 'DD/MM/YYYY HH:mm';

const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
    parse: {
      dateInput: MY_FORMAT,
    },
    display: {
      dateInput: MY_FORMAT,
      monthYearLabel: 'MMM YYYY',
      dateA11yLabel: 'LL',
      monthYearA11yLabel: 'MMMM YYYY',
    },
  };

and added this to providers:

{ provide: MY_FORMAT, useValue: CUSTOM_DATE_FORMATS }

This works when using the calendar icon to input the date and time.

It comes out like this.

Format when using the calendar icon

but when i manually change the seconds the format of the date and time changes.

And becomes this:

format after changing the seconds from 25 to 24

for some reason this also changes the month and date in the calendar



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source