Values extracted from date-time components cannot be entered back into date-time components

[SeekSwift]

https://github.com/hamzahamidi/ajsf/issues/229

This issue is still a problem and breaks the entire form, anybody found a workaround or fix? I would just create a custom datetime component but even after checking out the sourcecode i still do not know how.

Furthermore, as in my comment from that issue i tried manipulating the datetime values inside the json before assigning it to the jsonformdata but that only works until the user changes anything, upon which the datetimefields reset and the input gets transformed to the format with the Z at the end. It breaks the datetime fields as one is not able to enter anything which results in a correct datetime string.

[zahmo]

Hi, you can use the following workaround: remove the format: 'date-time' property from the schema and specify a layout with type 'datetime-local' for the field, so for example the inputs could look something like this:

{
  "schema": {
    "title": "Date and time widgets",
    "type": "object",
    "properties": {
      "native": {
        "title": "Native",
        "description": "May not work on some browsers, notably Firefox Desktop and IE.",
        "type": "object",
        "properties": {
          "datetime": { "type": "string" },
          "date": { "type": "string", "format": "date" }
        }
      }
    }
  },
  "layout": [
    {"key":"native.datetime","type": "datetime-local"},
    {"key":"native.date","type": "date"}
    ],

  "formData": {
      "native": {
        "datetime": "2024-04-16T07:07"
      }
    }
}

or if using React compatibility:

{
  "schema": {
    "title": "Date and time widgets",
    "type": "object",
    "properties": {
      "native": {
        "title": "Native",
        "description": "May not work on some browsers, notably Firefox Desktop and IE.",
        "type": "object",
        "properties": {
          "datetime": { "type": "string" },
          "date": { "type": "string", "format": "date" }
        }
      }
    }
  },
  "uiSchema": {
    "native": {
      "datetime": { "ui:widget": "datetime-local" },
      "date": { "ui:widget": "date" }
    }
  },

  "formData": {
      "native": {
        "datetime": "2024-04-16T07:07"
        }
   }