Skip to content
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

DateTimeInput min/max value #2242

Open
antoniolodias opened this issue Jul 27, 2022 · 4 comments
Open

DateTimeInput min/max value #2242

antoniolodias opened this issue Jul 27, 2022 · 4 comments
Assignees
Labels
💅 Type: Enhancement Improves existing code

Comments

@antoniolodias
Copy link

Is your feature request related to a problem? Please describe.
I need to have some disabled days when using DateTimeInput component

Describe the solution you'd like
I noticed a similar component DateInput accepts 2 props minValue and maxValue that replicate exactly what I need

Describe alternatives you've considered
I can achieve more or less the same with an error message after selection, but having the options disabled from the start would be much better!

Additional context
Where I am currently working I would like to set any dates in the past to disabled, having this possible through a prop would be great

@antoniolodias antoniolodias self-assigned this Jul 27, 2022
@antoniolodias antoniolodias added 💅 Type: Enhancement Improves existing code and removed 🚀 Type: New Feature Something new labels Jul 27, 2022
@CarlosCortizasCT
Copy link
Contributor

Hi @antoniolodias

Thanks for opening this feature request.

I would like to ask a question about the new props you would like the DateTimeInput component to support.
Since this is a component dealing with date and time, what would you expect the input to be like?
For the DateInput component we expect a string with this format: YYYY-MM-DD. Something like this would make sense to you?: YY-MM-DDTHH:mm.
Would the time always be referring to browsers time zone (user’s local time)?

Also, how do you expect the time validation to work?
I mean, if provided minValue is 2022-07-26T19:00 and the user types 15:00 in the time text input of the component, that should be invalid if selected date is 26, but it should be valid if selected date is 27 (for example).
Since the calendar is closed when users enters the time (or change the focus outside of the calendar), the user might not be aware the provided time value is not valid so, do you expect that value to be validates as the user is typing? do you expect it to be updated to the earliest valid time for that date automatically?

Thanks.

@antoniolodias
Copy link
Author

Hi @CarlosCortizasCT thank you for looking at this!

All good questions.
The date format you provided looks good to me, maybe even better would be if we could also have a prop to overwrite this default format for comparison (maybe not so necessary). Do you think that's possible? Otherwise, I imagine it should just accept the existing format of the component's output.

For the timeZone, again, I think it could be flexible through a prop, maybe have a default that can be overwritten by a prop, the default should be whatever it's currently used for the DateInput component.

The validation is interesting, maybe some UX person could help out here. What I imagined was it being precise to the level of the time, so the day itself is still available but if you try to add a time before on the bottom area or on the input area then maybe the dropdown would not close 🙄 maybe the input text could change colour to gray to show the user something is wrong. What do you think?

Thanks for following up with this!

@CarlosCortizasCT
Copy link
Contributor

Hi @antoniolodias,

Let me go through your comments:

  1. I took a quick look at the component and having a custom format for input/output is not pretty straightforward. I would only follow that path if this is something really required.
    Both DateInput and DateTimeInput components work with fixed formats and we would need to update both if we want to implement such a feature.

  2. My bad. I checked again and the component already has a (required) timeZone property.

  3. I would prefer someone from UX to help us here. @FilPob what's your take on this?

Thanks.

@FilPob
Copy link

FilPob commented Jul 29, 2022

Hey guys, thanks for the suggestions! I will have a look and prepare some proposals. I will schedule a short sync afterwards

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
💅 Type: Enhancement Improves existing code
Projects
None yet
Development

No branches or pull requests

3 participants