Datepicker - how to specify min and max value (range)

Hi all!

I have a date picker field for which I want to specify the minimum and maximum date that is allowed.
I guess the most logical place to define this min and max would be the schema but I did not find anything about this in the json schema definition

And while we are at it, I would also like to specify a dynamic range. For instance:

"minimum": "today" - date must be today or in the future
"exclusiveMinimum": "today" - date must be in the future
"minimum": "today", "maximum": "today+7d" - date must be between today and 7 days from today

Is there already a solution for this?
What is the best place to define this range? The schema or uischema?

Thanks! Corne

Hi @cornelos,

This is not supported out of the box. You will need to implement a custom date renderer which is able to parse these special minimum and exclusiveMinimum properties. You can just copy the existing one and modify it to your needs

If you like you could also contribute a change which allows to modify the minimum date via the props. Then you would not need to do a full copy but could just reuse the one of JSON Forms.

If you also want to have an integrated validation support for them you can either implement a custom AJV validator and hand over your own AJV instance to JSON Forms or you use the additionalErrors prop by which you can hand over custom errors to JSON Forms (they should look like AJV errors). If you don’t care about the error objects and are fine to just handle the errors in the UI you could of course skip all this and just do it yourself within the renderer.

As these are data concerns I would expect these attributes to be part of the JSON Schema. However this is just a soft requirement, you can add them to either of the schemas or even handle them programmatically.

1 Like

Thanks for the hints Stefan!

I found that I can use formatMinimum and formatMaximum in the schema:

"geboortedatum": { "type": "string", "format": "date", "formatMinimum": "2020-01-01", "formatMaximum": "2022-09-02" }

AJV will use these for validation:

Next step is to limit the date picker to the set range…

1 Like