
Show HN: React Timekeeper – Time picker based on the style of Google Keep - catc
https://catc.github.io/react-timekeeper/
======
butz
That's actually a default time picker on Android, used in all native apps;
Keep is just one of them.
[https://material.io/guidelines/components/pickers.html#picke...](https://material.io/guidelines/components/pickers.html#pickers-
time-pickers)

~~~
Sujan
What does it look like for 24 hour format?

~~~
Shywim
You get two hours rings, outer is for 1-12, inner is for 13-00.

------
liquidise
This is a nice start but i was confused how i should change my hour selection
once i had made it. I was looking for an "Undo" button. Once i selected a
minute value the component hid entirely, forcing me to refresh just to figure
it out.

Rule of thumb: when designing components it is a good practice to ask, on
every user click/keypress, "what happens if they made a mistake here?"

~~~
X-Cubed
Just like on Android, you can change the hours from the minute screen by
clicking the hour number in the top bar.

You can also reopen the popup without refreshing the page by clicking the link
that appears once the popup has closed, just under the selected time.

~~~
r00fus
Not intuitive at all. Instead of the snazzy animation on the clock face after
selecting hour, the animation should focus more on the hour vs. minute
transition.

~~~
nurettin
Yet it is the first thing I tried and it worked. The color feedback on the
currently selected number is a good hint.

------
TruthSHIFT
I'm having trouble using the demo on my phone. Is there a way to prevent the
page from scrolling?

~~~
zuppy
I think this should always be the first question: how does my code behave on
mobile? Considering that most (or a huge percent of) people are accessing the
web on mobile now and that thos is targeted towards them, this is a kind of a
blocking issue that would prevent me for using it.

~~~
tracker1
My first experience with mini laptops was similar... the vertical space was
very limited, and can't say how many times I had to zoom out to dismiss the
takover popups on some sites.

Phone tends to be even worse, especially when zooming is disabled by a site, I
get why, still bugs me though.

------
fishnchips
This isn't to take away from the awesome work of the OP, but Google has a
library of React UI components based on material design, and a similar time
picker is one of them - [http://www.material-ui.com/#/components/time-
picker](http://www.material-ui.com/#/components/time-picker)

~~~
throwaway2016a
FYI. That is not a Google library. It's some company called Call-Em-All

~~~
fishnchips
Oh wow, I haven't noticed that. I somehow assumed that you wouldn't be putting
Google in your tagline if you were not associated with the company. Shame on
me.

------
spoiler
The thing I like about this the most is that is uses SVGs. This made me very
happy! It's a very cool project otherwise too, and I can definitely see myself
using it.

EDIT: Alternative would be to use HTML and CSS transforms or similar hacky
techniques. So, I am glad to see SVGs gaining more popularity.

------
Traubenfuchs
When opening the minute selection dropdown and the selecting time with the
dial the dropdown disappears on mouseup instead of mousedown. The same happens
when using the hour drop down. I think it should disappear once you mousedown
on the dial.

Using the dial, you can sometimes start selecting or even drag/dropping some
parts of the page. Use the css property user-select to prevent users from
selecting visual elements that should not be selected. No one is ever going to
want to select the text on your AM / PM buttons, so don't make it selectable.

Do people really prefer this over two infinite spinning number selection dials
(one for the minute, the other for the hour) like on iOS?

------
datashovel
I've designed and built a few of these. I've heard both sides of the argument
(digital/analog). I find analog better in every way, but in my experience
those who prefer digital time pickers are definitely vocal.

I've typically created a user config option in any app I've designed so the
user can choose whether time pickers are digital or analog.

EDIT: I see that clicking on the numbers at the top pull up a dropdown, which
I think is a nice touch. Designs in the past I've opted for a double-click or
double-tap to activate the keyboard so user can type in the number if they
wish.

------
rorosaurus
I actually like the design of this much more than the default time picker on
Android!

The AM/PM selection in is selector very clear - this is something I choose
incorrectly every time I set an alarm on Android. On Android, the AM/PM
pickers are inline with the time preview at the top - and you have to guess
which one - blue or white - is the currently selected one.

Sure, if you stop and think about it, you can figure it out. This separate
picker method in catc's selector seems much clearer in every case - especially
when a user is in a rush or sleepy!

~~~
GranPC
It actually used to be exactly like this in Android, but it got changed to
have in-line AM/PM pickers like you said.

------
jrfarina
You need to e.preventDefault(). On mobile it scrolls the phone when I drag the
handle around.

------
paulddraper
Awful contrast.

#6c6c6c on #00000

You need to bold your text if you really want that.
[https://www.w3.org/TR/WCAG/#visual-audio-
contrast](https://www.w3.org/TR/WCAG/#visual-audio-contrast)

~~~
catc
Open an issue and I'll change it.

------
hello_there
Why not just let me type it?

~~~
TruthSHIFT
This is for a phone.

~~~
e12e
Personally I prefer a digit "touchpad" and 24h digital entry - just as for
entering phone numbers. So "why not let me type it (on my smart phone)?" is a
perfectly sensible question for me as well.

But see the comment above about pro-digital possibly being a vocal minority -
we very well could be.

I suppose there's a big difference with never really growing up with analog
clocks, and being used to relate to analog clocks for time keeping. All my
watches were casio digital clocks, set for 24h display - similar with alarm
clocks. I readily think in terms of 24h, not 2x12.

[ed: I'm also used to be able to tell the time by the sun for 24h two months
in summer - 0100 being due north with dst (ironic, but true) - just as 1300 is
south, 0700 is East, 1900 is West.]

------
MrLeap
This is neat, it'd be cool if there were support for choosing a time range
from the same clock. I have that use case right now and I'm using one of those
two handled slider widgets.

------
cdicelico
Why this instead of [https://github.com/ecmadao/react-
times](https://github.com/ecmadao/react-times)?

------
SeeDave
Great library, and great documentation! Thanks for sharing :)

------
d0vs
How would I go about using my own style?

~~~
fishnchips
Having read the docs I'd assume you need to pass your styles using a `config`
prop.

~~~
catc
Yeah, for now. I'll eventually add some way to pass in custom classes or
something.

~~~
fishnchips
I personally find a prop to be a perfectly acceptable solution - you can
define styles in your JS and share between components if need be. But I reckon
there are folks who'd prefer passing class names to define their styles in
CSS.

------
amelius
Very cool.

Unfortunately I don't use React :(

