Date format/pattern on ui

General
1

I have a schema with a date field in the following structure
“dateOfBirth”: {
“type”: “string”,
“format”: “date”,
“description”: “Please enter your DOB”,
“pattern”: “dd/mm/yyyy”
}

when I try to enter the date in the generated date mui component the field mask is showing this:
____--
but the message is saying:
should match pattern “dd/mm/yyyy” should match format “date”

My browser locale is set correctly to show dates in dd/mm/yyyy format so how can I get the date mui component to show the date mask in the correct format?

Thanks

[original thread by Johnny]

2

Hi @syntiro, the date control always saves the date in YYYY-MM-DD format. Note that pattern is supposed to be a regex which shall match the string. It’s not meant to be used to define a different date pattern.

Note that his is fully compliant to the specification, as JSON Schema defines date to be full-date of RFC 3339:

full-date = date-fullyear “-” date-month “-” date-mday

The date control also supports showing the date in another locale, while still saving it according to spec. Sadly this functionality is not used in the provided renderer set. However you can easily use it by registering a custom date renderer which simply invokes MaterialDateControl and then set the momentLocale to whatever you’d like. This way you can support arbitrary date formats in the UI while still saving it in the specified full-date format.

3

[Johnny]

Hi @sdirix . Thanks for coming back to me. Getting used to the renderers now having completed radio and checkbox renderers. I thought you already had a locale date renderer as I seen it done in your examples in the format from my browser Array | JSON Forms. I’ll take a look at the MaterialDateControl to start. Thanks