Custom Datepicker renderer - transform date format

General
1

Hi!

I want to create a custom date renderer based on my own datepicker.
This datepicker works internally with a date object like this: { year:2022, month:5, day:6 }
The renderer expects a data value in this format “2022-05-06”

Question: how do I convert between these formats? I guess there are two moments where I have to make a conversion?

  1. From the picker to the renderer, if the user selected a new date
  2. From the renderer to the picker, to set the initial date value. To make the conversion from the underlying form value (format = YYYY-MM-DD) to the format of the picker.

I found that I can use the getEventValue(evt) method to make the conversion for (1)
But how/where do I make the conversion for (2)?

2

Hi @cornelos!

  1. In your renderer you receive the data property coming from JSON Forms. This will be in the the YYYY-MM-DD format. You can then transform this value and hand it over to your picker.

  2. Once the user did their selection you will get your custom format from your picker. This then need to be converted to the YYYY-MM-DD format and handed over to the handleChange method.

Here you can take a look on how we do it in the React Material renderers as we allow arbitrary formats for saving date/time values: getData is called on the data coming from JSON Forms, converting it to a format the picker understands. createOnChangeHandler takes the result of the picker and converts it back to the save format, then it’s saved via handleChange.

3

Hi Stefan!

Thanks for your answer.

How would this work in the Angular world?

Looking at the Angular Material Date Renderer I see that the transformation from the picker to the renderer (1) is done by overriding getEventValue

But how does the renderer set the value of the picker (2)? I cannot find the code that is doing this transformation. Or is this not necessary in this case because the Angular Material picker understands the YYYY-MM-DD format?