Wrong date parsed on angular with german locale

[wuedev]

Describe the bug

Using the angular seed with a german locale, a date typed in a date field is not parsed correctly.

Expected behavior

A date like '1.10.2010' should be accepted as is.

Steps to reproduce the issue

I have set up a simple form based on the angular seed. Locale is set to "de-DE". The datepicker displays german labels for months etc. and the selected date is displayed in the correct german format (1.10.2010).

However, typing a date directly into the date field doesen't work as expected - entering '1.10.2010' and pressing enter the date is changed to '9.1.2010. It appears that the months is decreased by one and then month and day are exchanged, so it seems that the original american date format (MM.DD.YYYY) is used for parsing. I have set an option "dateFormat" on the date control in uischema.json, which has no effect.

Screenshots

No response

Which Version of JSON Forms are you using?

v3.1.0

Framework

Angular

RendererSet

Material

Additional context

No response

[lucas-koehler]

Hi @wuedev , thanks for reporting this issue. As you specified just v3 for the version, are you using 3.0.0 or a later one?

[wuedev]

Hi @wuedev , thanks for reporting this issue. As you specified just v3 for the version, are you using 3.0.0 or a later one?

Versions are:

angular/core: ~12.2.0
angular/material: ~12.2.0

jsonforms/core: 3.1.0
jsonforms/angular-material: 3.1.0

[wuedev]

I was using v12 of angular because this is what's used in the angular seed and I'm not sure which version is supported officially. But from browsing issues it seems that now at least angular v15 should be supported, is that correct?

Awesome project, btw!

[lucas-koehler]

Hi @wuedev , the latest pre-release version 3.2.0-beta.0 supports Angular 16 and 17. Angular 15 was briefly supported in the code base but dropped again. When 3.2.0 is released, Angular support will stay at 16 and 17 for that release.

[wuedev]

Hi Lucas,

i've tried 3.2.0-beta.0, the problem remains.

I'm using the DateAdapter like this in app.component.ts:

import { DateAdapter } from '@angular/material/core';
...
export class AppComponent {
        ...
        i18n = { locale: "de-DE" }
	dateAdapter

  constructor(dateadapter: DateAdapter<Date>) {
  	this.dateAdapter = dateadapter
	this.dateAdapter.setLocale(this.i18n.locale)
  }

Any tips what I could do? Unfortunately I'm still very new to angular...

[wuedev]

Hi Lucas,

what do I have to do to get a correct datepicker for the German locale/date format? What am I missing? This should be possible, and it shouldn't be so hard. Any tips are welcome, thanks for your help.

[lucas-koehler]

Hi @wuedev ,
I think there are two separate issues at play here:

1. There is a known issue that dates in the angular date renderer sometimes are off by one day. This was reported and investigated here: Angular date picker: selected date is off by one day #2033 . Unfortunately it has not been finally fixed, yet.
2. Without deeper investigation/debugging I cannot tell you exactly why the parsing of date in German locale goes wrong but it seems more like a bug than you doing anything wrong :) If you want to investigate this, you can have a look at date.renderer.ts. On change of the text field the method onChange of its super class from abstract.control.ts is called. This then calls getEventValue from date.renderer.ts. This gets the date as an ISO date string and updates the state. Something might not use the localization there.