Implement min and max dates in ClayDatePicker

[markocikos]

What is your proposal?

Two new props for ClayDatePicker, min and max. 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 FDS DateRangeFilter. We would like to:

1. implement date & time picker in FDS, that's the product requirement
2. replace native datepicker implementation in FDS DateRangeFilter with ClayDatePicker, 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

[matuzalemsteles]

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.

• https://codesandbox.io/s/quick-start-clay-finale-forked-v9svnm?file=/src/index.js

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.

[markocikos]

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:

• 'snaping' of default date to edge of allowed interval
• disabling of 'today' option if it's not in interval

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 ClayTimePicker next to native date picker. We can improve this to a full ClayDatePicker solution later on.

[matuzalemsteles]

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.