-
-
Notifications
You must be signed in to change notification settings - Fork 5.3k
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
Add components to show only time #7917
Conversation
c755cd7
to
bec9d7c
Compare
bec9d7c
to
de78ba0
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great contribution, thank you so much! 🙂
One important thing though, since is is a new feature, could you please rebase your branch and target your PR to the |
Lastly, regarding your question about whether we need to factorize the code between |
Sorry about that I thought I based it on next already.
Ok then I will keep it that way. |
de78ba0
to
449d68d
Compare
@slax57 everything is fixed. My work was based on next but I forgot to change the target to next as well. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry I took so long to review, I was too busy to do it before.
I have one last request, and then we will be good to merge this! 🙂
I just think it would be better to showcase the time picker from the browser, which demonstrates a little better imo the benefits of this component.
I made this screencast for this purpose:
Would you mind using this one in the docs?
Thanks
This is the picker from Edge, so a good idea would be to include both gifs to make sure users understand the appearance differs from browser to browser. See here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#appearance |
449d68d
to
a356ed8
Compare
I added both gifs in a table to make sure users understand render will change based on the browser. |
@slax57 is everything good for you? |
Sorry for the delay. |
Strange I just tested on Firefox on Linux and it works fine. Under the hood it uses an HTML |
I understand it is at least surprising. Here is a screencast on Chrome on which I use Enregistrement.de.l.ecran.2022-07-26.a.17.28.47.mov |
Do you only get this behavior on macos? Because I don't have the hardware so I cannot test. |
Can you open the console to check for errors? Maybe there is an issue with the function |
Hi Arnaud, We didn't forget your job but the holidays postponed our feedback. We are coming back to you as soon as we can. |
We tried to reproduce @septentrion-730n 's issue on several other machines, but none of them had the issue. |
Believe it or not, actually we did some more testing today and now I do reproduce @septentrion-730n 's issue 😅 Anyway, the good news is, we have identified the issue. It actually comes from the |
a356ed8
to
1776d10
Compare
@slax57 @septentrion-730n applied the changes to the first commit to keep the history clean. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you so much! 🙂
This PR adds a brand new component:
<TimeInput/>
. It behaves much like the<DateTimeInput/>
, but only shows the time using an input withtype=time
.Along with adding a new component, this PR also adds a new prop
showDate
to the<DateField/>
component. This prop, much likeshowTime
, allows the user to control whether to display the date in the field. When used together withshowTime
, users can show only the time usingtoLocaleTimeString
. IfshowTime
andshowDate
are both false, the component throws an error.Tests and documentation have been updated.
I noticed a lot of the code was copy-pasted between
<DateInput/>
,<DateTimeInput/>
and now<TimeInput/>
. Would it be better write the logic in another file and reuse it in each component, or do you want to keep it this way to make understanding each component easier for users?Closes #7914