Date control inconsistency

I have a data schema where I have several date values. Some are within an array of objects that have a date field. The problem that I’m noticing is that the date control, when rendered from the array is not the same as that shown when it is not within the array. The latter look like a standard MUI date picker while the one in the array looks totally different. I’ve examined my schemas and see nothing different other that the fact that one is from an array.

Does anyone know what would be causing this issue and how I could go about making them consistent (preferably using the MUI date picker) ?

Hi @msueping,

the React Material UI renderer set actually consists of two different renderer sets. The renderers which are invoked for each actual UI Schema element and the cells which are invoked on table cells. The “date”, “time” and “date-time” renderers use the Material UI pickers while the cells fall back to Browser Native controls.

Like custom renderers you can also register custom cells. This way you could reuse the same pickers also in the cells.

Note that we recently overhauled the time pickers for the renderers, so you might want to use the latest JSON Forms 3.0 alpha if you’re interested in their latest state. The documentation is not yet in its final state but can be accessed here in the mean time.

Thanks for the feedback.

It’s a shame that it can’t just be a set and forget thing and one component is rendered regardless of if it’s in a cell or not. Now I have to figure out cell rendering and try to duplicate the MUI date picker in it. BTW, after installing the @next version that has the updated time picker, I get the following error

I’m using the latest MUI v5 and if I’m not wrong, the icon that it is looking for is now accessed from:


We’re looking into updating to Material v5 soon.

As we’re open source, feel free to contribute a cell renderer reusing the same date, date-time and time pickers as the regular renderers. If you prefer you can also check out our professional support offerings by which we can prioritize features like this one.