Mtx-DatetimeModules throw format errors Angular 17

[Will-at-FreedomDev]

RangeError: Format string contains an unescaped latin alphabet character o

We are seeing the above error in DevTools when using custom date/time formats. I inspected the date-fns code and it appears that the dirtyDateFormat parameter is an object: { day: "numeric", month: "numeric", year: "numeric" }, which doesn't seem to be supported by that module. The o from the error above is coming from when the dirtyDateFormat parameter is converting to a string ("[Object object]").

I think this issue is stemming from the Mtx-DatetimeModules. We were successfully using MtxDateFnsDatetimeModule until it seems Angular 17 when the error began to present itself. I tried MtxNativeDateTimeModule and received the same error. I then used NativeDatetimeModule and this appeared to resolve the issue. I don't know what repercussions this may have in the project, but it does resolve the immediate issue.

We define the following providers for reference.

import { MAT_DATE_LOCALE } from "@angular/material/core";
import { MTX_DATETIME_FORMATS } from "@ng-matero/extensions/core";
import { enUS } from "date-fns/locale";

export const dateProviders = [
  {
    provide: MAT_DATE_LOCALE,
    useValue: enUS,
  },
  {
    provide: MTX_DATETIME_FORMATS,
    useValue: {
      parse: {
        dateInput: ["P", "PP", "PPP"],
        datetimeInput: ["Pp", "PPpp"],
        timeInput: ["H:mm", "h:mm a", "h:mma", "hmm", "hmma"],
        monthInput: ["MMM", "MMM yyyy", "MMMMyyyy", "MMMM", "MMMM yyyy", "MMMMyyyy"],
        yearInput: ["yyyy"],
      },
      display: {
        dateInput: "P",
        datetimeInput: "Pp",
        timeInput: "p",
        monthInput: "MMM yyyy",
        yearInput: "yyyy",
        dateA11yLabel: "PP",
        monthLabel: "MMM",
        monthDayLabel: "MMM d",
        monthDayA11yLabel: "MMMM d",
        monthYearLabel: "MMM yyyy",
        monthYearA11yLabel: "MMMM yyyy",
        timeLabel: "p",
        popupHeaderDateLabel: "MMM dd, E",
      },
    },
  },
];

As another reference, the other related modules being imported are:

MatDatepickerModule,
MatNativeDateModule,
MtxDatetimepickerModule,
NativeDatetimeModule

[nzbin]

For Angular 17, you can use the provide* API

https://github.com/ng-matero/extensions/blob/ab97c853f1fe5b7a63cb53693ce917002b09f3d8/projects/dev-app/src/app/datetimepicker/datetimepicker-demo.component.ts#L53-L75

Please check this issue https://github.com/ng-matero/extensions/issues/141 to learn more about the datetime format

[willherr]

For Angular 17, you can use the provide* API

https://github.com/ng-matero/extensions/blob/ab97c853f1fe5b7a63cb53693ce917002b09f3d8/projects/dev-app/src/app/datetimepicker/datetimepicker-demo.component.ts#L53-L75

Please check this issue https://github.com/ng-matero/extensions/issues/141 to learn more about the datetime format

Thank you for the quick reply! I will try this today.

Whoops just realized this is my alt account, sorry about the account confusion!

[Will-at-FreedomDev]

As an update, I tried to use the *provide adapter for the Fns module, but I was seeing the same behavior with error aforementioned. I did not change the parse or display formats from what I posted in the OP, but that could be the issue. They were used fine in Angular 16 so I wouldn't expect to have to change those. Anyway, feel free to close this issue if it's working as you expect; using the NativeDatetimeModule is a suitable workaround for us.

[nzbin]

As an update, I tried to use the *provide adapter for the Fns module, but I was seeing the same behavior with error aforementioned. I did not change the parse or display formats from what I posted in the OP, but that could be the issue. They were used fine in Angular 16 so I wouldn't expect to have to change those. Anyway, feel free to close this issue if it's working as you expect; using the NativeDatetimeModule is a suitable workaround for us.

Please give me an online example

[Will-at-FreedomDev]

@nzbin I tried to create a minimal reproduction, but was not able to. If I happen to figure out what is going on here, I'll let you know. Otherwise, it's likely working as expected and something else such as another library is causing an issue. Thank you!

[Will-at-FreedomDev]

@nzbin I wanted to give you an update. First of all, my apologies. I see now that on this component where we were having this issue, someone was using the Angular Material mat-* date picker components instead of mtx-*. I figure if someone reports a similar issue in the future, this could be the problem.