jsonforms icon indicating copy to clipboard operation
jsonforms copied to clipboard

Different behaviour on field of type string with format date in array of objects vs object

Open Link631 opened this issue 4 years ago • 1 comments

Describe the bug

Given is following schema where one date property is in the root object and another date property is nested inside a list of objects

schema = { type: "object", properties: { validators: { type: "array", items: { type: "object", properties: { name: { type: "string", title: "Name", description: "Name" } }, required: ["name"] } }, currentUserCanValidate: { title: "Aktueller Benutzer ist validator?", type: "boolean" }, validations: { type: "array", items: { type: "object", properties: { validationDate: { title: "date in array of objects", type: "string", format: "date" }, validatedBy: { title: "validiert von", type: "string" } }, required: ["validationDate", "validatedBy"] } }, nextValidation: { type: "string", title: "date in object", format: "date" } } };

When I use react with material renderer, then I expect, that the formats in UI and the presentation of the DateField is in both cases the same, but it renders different formats:

To Reproduce Copy the schema and render the form. Expected behavior The date controls schould look the same and not differnt

Screenshots image

Further questions:

How can i influence the UI Format? I know that the json schema date is per specification in format yyy mm dd... but I guess that the UI can render differently while just storing the date in that format.

Do you have working examples which show how to change the date format in ui?

Link631 avatar Mar 05 '21 17:03 Link631

Hi @Link631, these controls are rendered differently as we employ two different renderer sets here. We have the fully featured renderers which are the ones invoked by a ui schema element (e.g. a Control) and the cells which we use within the Table renderer. Therefore cells are usually implemented in a simpler way.

For date we use the MuiPickersUtilsProvider + AnyPropsKeyboardDatePicker in the renderer. We check the local date time format and use that as the format to choose. In the cell we just use a simple Input of type date, without handing over a special date time format. This is probably why they diverge.

I think these renderers should be aligned to at least use the same format. We could also check whether we should just render the cell in the same way as the normal date renderer.

For now you need to register a custom renderer and cell renderer when you want to customize the date format for your use cases.

sdirix avatar Mar 09 '21 10:03 sdirix