DateTimePicker: Output string not automatically parsed to required format on datetime change

[desmondblue]

First of thanks for the amazing support and this repository to all involved. While working with the datetimepicker component I noticed that although the input strings are parsed to the required format as set in the module housing the component and datetime-picker input shows the value correctly.

But upon changing the date input the output string is not getting automatically parsed in the required format. So firstly my question would be if this is by design so? And if so then why ? I would suggest that upon datetime change the output string should also be parsed to the specified format in the MtxDateTimeFormats in the provider.

If needed I can help out with a PR.

Version dependencies in my project: "moment": "^2.30.1" "@angular/material-moment-adapter": "^17.3.10", "@ng-matero/extensions-moment-adapter": "^17.0.0", "@ng-matero/extensions": "^17.3.6",

Module providers:

  providers: [
    provideMomentDatetimeAdapter(
      {
        parse: {
          dateInput: "YYYY-MM-DD",
          monthInput: "MM",
          yearInput: "YYYY",
          timeInput: "HH:mm",
          datetimeInput: "YYYY-MM-DDTHH:mm:ssZZ",
        },
        display: {
          dateInput: "YYYY-MM-DD",
          monthInput: "MM",
          yearInput: "YYYY",
          timeInput: "HH:mm",
          datetimeInput: "YYYY-MM-DD HH:mm",
          monthYearLabel: "YYYY MMMM",
          dateA11yLabel: "LL",
          monthYearA11yLabel: "MMMM YYYY",
          popupHeaderDateLabel: "MMM DD, ddd",
        },
      },
      { strict: true },
    ),
  ],

html code:

<mat-form-field>
  <mat-label>{{ label | translate }}</mat-label>
  <mtx-datetimepicker
    #datetimepicker
    [type]="type"
    [mode]="mode"
    [timeInput]="true"
    [multiYearSelector]="true"
  >
  </mtx-datetimepicker>
  <input
    [mtxDatetimepicker]="datetimepicker"
    [min]="minDate"
    [max]="maxDate"
    [placeholder]="placeholder"
    [formControl]="control"
    matInput
    required
  />
  {{ control.value }}
  <mtx-datetimepicker-toggle
    matSuffix
    [for]="datetimepicker"
  ></mtx-datetimepicker-toggle>
</mat-form-field>

The default output format comes like so: Fri Sep 13 2024 14:52:00 GMT+0200

Ideally this should be also parsed to the output format passed

[nzbin]

I'm sorry, the Material's datepicker also doesn't has dateOutput parse format. But you can customize a directive to parse it. https://ttquang1063750.medium.com/angular-material-create-a-separate-format-for-each-date-picker-on-the-same-page-e9e35fda1b56

[desmondblue]

@nzbin Thanks for the information.