24 Hour format
Wain-PC opened this issue · 11 comments
Hello! First of all, thanks for the great component!
However, it would be great if you add 24 hour datepicker option. It's rather uncommon to use AM/PM here in Europe.
Thanks again!
I originally had some basic support for 24 hour mode, but the design didn't really work out. Having 24 numbers (one for each hour tick) didn't look too good. The clock ended up looking too compressed/busy so I removed the feature.
An alternative could be 0-24 hrs but i'd show only even numbers so it maintains the 12 tick format.
The option with even numbers should be fine and rather easy to implement, I suppose.
However, take a look how it's actually implemented natively:
Hi guys,
Is it still definitively not possible to use a 24h format ? Thanks
I'll experiment with the design and see what works.
I would also really like to use the timekeeper but in Europe the AM-PM format is really uncommon so sadly I can't use the component neither. The design @Wain-PC proposed should be easily implemented I think. That is the way android implements it as well.
Such an opportunity would be very useful
Unfortunately, I didn't initially build this with the 24h format in mind, so adding 24h format where it's split up with 12 hours on the outside and 12 hours on the inside would require significant rework. Right now the click/drag handler listens to events within the entire circle. If I had 2x 12h circles, It'd be a bunch more work to determine if events are coming from outer vs inner circle.
Right now, the most straightforward thing I could do is changing the 12 to 24 and displaying the hour increment every 2 hours (but still allow for selection of odd numbered hours). So it'd look something like:
24
22 2
20 4
18 6
16 8
14 10
12
It's not great design-wise, but it would work...
I really liked your component, but because of 24 format issue I decided not to use in my project.
I know it's a lot of work, but please think about it.
Another issue it's not working well on Mobile. I tested on my device but browser scrolling is occurring at same time with clock adjusting.
Thanks, anyway, very nice and clean design.
It is not showing up in Edge Browser but it is working well in chrome. So is it not available in edge , please suggest me how to use it in edge
Hi Catalin.
Like so many others, I like your component a lot but I regret that it doesn't support a 24 hours format. In fact, I missed it so much that I decided to give it a shot myself, and the solution turned out to be quite obvious...
I tried to keep the amount of code changes as minimal as possible. And I'm pretty happy with the result (see pull request #21). I hope you like it too.
By shifting the outer ring of the Google Keep clock by 1/2 increment, the angle calculated from the click or drag coordinates still uniquely identifies each selectable hour. That way, your original implementation didn't need any drastic changes at all.
The default mode still operates in AM/PM mode, so it remains backwards compatible. However, using it like this: <TimeKeeper hourMode={'hour24'} /> results in the following:
