The time picker is awful: click multiple times to choose the time

[dimaip]

trafficstars

I tried hard to implement it differently at the time, but what we have now requires tens of clicks to pick the correct time. The problem is that we'd be forced to use a completely different datatime editor, and I didn't find any nice React datepickers so far. In the worst case scenario we could implement it from scratch...

[paavo]

24 hour time format would be very nice..

[lorenzulrich]

What about this one: https://github.com/YouCanBookMe/react-datetime

It is a fork of this one http://dev.quri.com/react-bootstrap-datetimepicker/ which is based on bootstrap-datetimepicker (which has no connection to React). I integrated the non-React variant some time ago and found it quite nicely. It also relies on Moment.js which is a nice library.

I know that the UX principle is basically the same, but AFAIK it supports 24h format.

[lorenzulrich]

Fun fact: That's the one already used in Neos UI. Strange that there is no 24h support...

[dimaip]

Well, so maybe it's possible to enable the 24h format then? I'm more concerned with how ugly the time picker is overall, e.g. you need 30 clicks to set time to 12:30...

[lorenzulrich]

I'm currently looking into setting up the UI for development, but I'm not really a good React dev. I let you know about the results. I agree the UI could be better, but 24h time format should have priority.

[lorenzulrich]

I pushed a first iteration only respecting the locale of the user interface

I need more guidance for overriding this through settings, especially where to place and how to name such a setting. There is almost no example in the current Settings.yaml of neos-ui.

[dimaip]

Hey but it still is awful: you need to click 30 times to set 12:30, no?

[lorenzulrich]

Yes, I agree the UX has not been improved. To my knowledge, there are not many good date/time picker components out there.

The current one could be integrated differently, by displaying the actual input field and not a fake input field and enable the input option, see readme at https://github.com/YouCanBookMe/react-datetime. This would allow to set the date and time manually in the input field.

[jonnitto]

In the documentation, it is something written about minuteStep (default to 5). I've tested it with the newest version of the UI (1.3.3), but this option gets ignored. Besides that also the placeholder option gets ignored. With the 5 minutes option, you would have only 6 clicks...

the minute step could be solved with timeConstraints

timeConstraints: {
  minutes: {
    step: minuteStep
  }
}

[jonnitto]

Another issue: If I have set a defaultValue, the value gets also set if I want to have an empty field, but a default value should be clearable.

[dimaip]

step is not a good solution for all usecases, sometimes you need to set precise time, but could indeed be configurable

[daniellienert]

@dimaip isn’t it still awful??

[dimaip]

@daniellienert hah, a good call. Technically we've done the best we could, it now supports 24h format and doesn't require a lot of clicks to set the time. The only alternative that we have is to re-implement it from scratch, which I don't think anyone would be up to do, so as this issue is no longer actionable I closed it. If anyone plants to take care of it feel free to re-open.

[dimaip]

I'm reopening this issue as the date picker is indeed still awful. If somebody would ever be digging it, here's an interesting link on topic: https://reactnicedates.hernansartorio.com/

[baschny]

👍 on working on that, this is indeed a component worth a complete overhaul.

I think the "date picking" part is not the real problem, but the "integrated time picking", which is my view should be a separate component (even thou both work together).

Picking a date from a calendar there are probably tons of good examples on how this can be done. Typing in an "hour + minute" in another field is not that tricky either. Combine that two and you have a simple but yet more useful "date+time" component. And while we are on it, add an option for picking a "timezone" in case it matters (or at least visualizing the default timezone).

[pduersteler]

Jumping on the bandwagon of "@dimaip I guess it's still awful" since it's already 2 years ago since the last comment 😆

The current solution works, but after using it a few times now myself I agree with the unhappy users having to use it regularly to enter things. I'm currently contemplating to create a type: Time that's just a simple text field with validation to separate it from the date. Not sure yet about the long-term implications, though.