Add min and max date configuration to regform DateField #6842
Conversation
SegiNyn
force-pushed
the
date-field-min-max-settings
branch
from
90543bc to
8b56a91
Compare
SegiNyn
force-pushed
the
date-field-min-max-settings
branch
from
8b56a91 to
490e83d
Compare
OmeGak
left a comment
OmeGak
left a comment
There was a problem hiding this comment.
It seems strange that the date fields do not take all the horizontal space. This is caused by the following CSS rule.
ind-date-picker {
...
width: fit-content;
...
}
It would look nicer if it took the entire width:
indico/modules/events/registration/client/js/form/fields/DateInput.jsx
Outdated
Show resolved
Hide resolved
I guess in most places it looks nicer if a date picker field does not become super wide... |
SegiNyn
force-pushed
the
date-field-min-max-settings
branch
from
490e83d to
67cacaf
Compare
SegiNyn
force-pushed
the
date-field-min-max-settings
branch
2 times, most recently
from
74e7c5d to
80b998e
Compare
|
Hello @ThiefMaster , just a reminder about this PR. It’s been open for a while and I wanted to see if there’s anything else needed before it can be merged. If it helps, I've rebased it again so it's up to date. Thanks. |
| ); | ||
| } | ||
|
|
||
| export function dateSettingsFormValidator({minDate, maxDate, dateFormat}) { |
There was a problem hiding this comment.
For dateFormat === '%Y' the behavior of the field is a bit weird, since for a user it's not clear that any year selected by a user will become xxxx-01-01, so if you just conveniently select let's say 2025-10-27 (current day) as the minDate, then it actually results in a 2026 minimum year.
Not sure what's the best solution here...
- disable minDate/maxDate when using the year-only format?
- add validation to disallow anything but
xxxx-01-01as the minDate when this format is selected? automatically jump tothis doesn't really work w/ the date picker since it does not displayxxxx-01-01 for minDate andxxxx-12-31` for maxDate when this format is selected?
There was a problem hiding this comment.
One possibility for option 3 would be doing this on the server side to avoid the hassle w/ final-form and the date picker. I think if you put ANY 2025 date as minDate you'd expect the year 2025 to be accepted anyway.
There was a problem hiding this comment.
Hello, since FinalDatePicker has a filter prop, I tested filtering the dates so that only Jan 1st of the year can be selected. I think this combines solution 2 and option 3 (validating in the server side) in 4df1ab5
Since the date will be 01/01 of the year inputted by the user, is it also necessary to do the same validation for the maxDate? they select the same year then they still can only choose that year only (they can only choose 2025 regardless of if the max date is 01/02/2025 or 31/12/2025)
There was a problem hiding this comment.
filtering the selectable calendar is nice :) However, you also need validation because one can type a date (unless the field already considers such a date invalid)
There was a problem hiding this comment.
Right, the extra validation was needed.
There was a problem hiding this comment.
Some validation regarding max date was still missing, I just added that
it's not a react component...
These keys should always be a valid date or None/missing
It was only used for the "weird" ones lacking a day component
ThiefMaster
force-pushed
the
date-field-min-max-settings
branch
from
d5be03f to
1d191e1
Compare
| opacity: 0.8; | ||
| } | ||
|
|
||
| ind-date-picker { |
There was a problem hiding this comment.
Just FYI, CSS modules do not work on tags, they are global. And this change broke the date picker looks e.g. in the event creation dialog when opened from a page that loads regform CSS.
There was a problem hiding this comment.
Oh no, sorry about that. Great you caught it quickly!
3 participants
This is to add min and max date configuration in the registration form DateField.