-
Notifications
You must be signed in to change notification settings - Fork 480
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
Implement min and max dates in ClayDatePicker
#5241
Comments
Well, today we have the range delimiter to select dates only in the range of years, maybe it makes sense to improve this API or replace it with something like the one you proposed to allow more precision of the delimiter. We just have to check with the Lexicon if the behavior would be the same, for example only being able to browse within that date range, if you can only select the date until the 15th and the rest must be disabled or not shown within the grid. cc @drakonux @emiliano-cicero Anyway, you can also get close to this behavior by controlling the component and adding validation, see this example in codesandbox. It probably wouldn't be ideal but it fills the need to add validation within a specific range after the date is selected in case you need to use the DatePicker now. |
Validation solution is an interesting alternative, but it seems to me like worse UX, compared to disabled inputs. Native min and max also have some conveniences that we would need to add manually:
These, along with prevention of browsing outside allowed interval, is really something that should be implemented internally. I think, for a temporary solution in DXP, it's simpler we add |
Yeah, navigation is still blocked when setting the years property, but it won't cover cases where your limit is on the same year. But I also agree that it's a bad UX for the user to select and only then see an error message in this scenario. But I would like the Lexicon team here to discuss the options and what decision we should make. Why does it change behaviors and do we need direction here. |
What is your proposal?
Two new props for
ClayDatePicker
,min
andmax
. These would be equivalents of min and max attributes of<input type="date">
. Input of dates beyond this range would be disabled.Why would adopting this proposal be beneficial?
We are using date input restriction in DXP, in commerce orders.
max
date is set to current date. There, we are using native date input, implemented in FDSDateRangeFilter
. We would like to:DateRangeFilter
withClayDatePicker
, because Clay date & time picker has very nice UX, has consistent l&f in browsers, and has consistent l&f with other Clay components in DXP.But, this would not be possible, without losing the min / max feature.
What are the alternatives to this proposal?
None from the perspective of Clay, we can choose not to implement this. For DXP, we can keep using native date picker, adding only
ClayTimePicker
for time./cc @dsanz @ugeortiz
The text was updated successfully, but these errors were encountered: