Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
SeekSwift opened this issue Apr 25, 2024 · 1 comment
Labels
workaround Workaround Available

Comments

@SeekSwift
Copy link

hamzahamidi#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
Copy link
Owner

zahmo commented Apr 27, 2024

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"
		}
   }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
workaround Workaround Available
Projects
None yet
Development

No branches or pull requests

2 participants