How to Implement a Date-Time Element Inside an Array with JsonForms

General
1

Hi everyone,

I’m currently working on a project using JsonForms and I need to include a date-time picker within an array in my form. I have successfully set up basic forms, but I’m having trouble configuring a date-time element inside an array structure. Below is the schema and UI schema configuration that I’ve tried, but it doesn’t render the date-time picker as expected. const schema = {
type: “object”,
properties: {
test: {
type: “array”,
items: {
type: “object”,
title: “Test”,
properties: {
option1: {
type: “string”,
format: “date-time”,
description: “schema-based datetime picker”,
},
option2: {
type: “string”,
format: “date”,
},
option3: {
type: “string”,
format: “time”,
},
},
required: [“firstname”, “time”],
},
},
},
};

const uischema = {
type: “VerticalLayout”,
elements: [
{
type: “Control”,
scope: “#/properties/test”,
options: {
format: “date-time”,
clearLabel: “Clear it!”,
cancelLabel: “Abort”,
okLabel: “Do it”,
dateTimeFormat: “DD-MM-YY hh:mm:a”,
dateTimeSaveFormat: “YYYY/MM/DD h:mm a”,
ampm: true,
},
},
],
};

2

Hi @gonzamdc,

I’m assuming you are using the React Material renderers.

We do not support customizing elements of the Table renderer via the UI Schema. However you can switch to the non-table style by using a detail UI Schema.

For example like this:

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/test",
      "options": {
        "detail": {
          "type": "VerticalLayout",
          "elements": [
            {
              "type": "Control",
              "scope": "#/properties/option1",
              "label": "Option 1 (DateTime)",
              "options": {
                "dateTimeFormat": "DD-MM-YY hh:mm:a",
                "dateTimeSaveFormat": "YYYY/MM/DD h:mm a",
                "ampm": true
              }
            },
            {
              "type": "Control",
              "scope": "#/properties/option2",
              "label": "Option 2 (Date)",
              "options": {
                "dateFormat": "DD-MM-YY",
                "dateSaveFormat": "YYYY/MM/DD"
              }
            },
            {
              "type": "Control",
              "scope": "#/properties/option3",
              "label": "Option 3 (Time)",
              "options": {
                "timeFormat": "hh:mm:a",
                "timeSaveFormat": "hh:mm a",
                "ampm": true
              }
            }
          ]
        }
      }
    }
  ]
}

To note: The documentation is a bit outdated as the Material UI Date pickers are fast moving. At the moment most of the labels can no longer be customized as we don’t show any labels at the moment.

Also note that if you specify a saveFormat which is different from the format defined in the JSON Schema, you will get validation errors. To avoid that, simply type that field as a string without a format in the JSON Schema and instead add the format into the UI Schema.

3

Hi! First of all, thanks for your quick response! I understand the schema you provided, but what I’m looking for is a way to display all the elements of the list without having to select them one by one to view their details. In other words, I would like to see a list of fields of type date-time all at once in a list format.
Thank you in advance for your help!

4

Hi @gonzamdc,

Our off-the-shelf renderers don’t support UI Schema options for the table use case. Therefore you will need to implement your use case(s) with custom (cell) renderers.

5

Hi,

Thank you for the clarification regarding the UI Schema options. I appreciate the insight and understand.

Thanks again for your assistance!

Best regards,