Vuetify: Timepicker in 24h mode not according to material design
Steps to reproduce
Include a timepicker component with format="24h".
Versions
0.12.5
What is expected ?
A timepicker like in Material Design should appear with 2 circles of hours and minutes.
Here is an example of what it should look like (and what it looks like on Android): http://www.materialdoc.com/time-pickers/
What is actually happening ?
Just one circle of hours and minutes is shown, also the time at top is right aligned instead of centred.
Reproduction Link
duebbert
All 11 comments
The link you provided links to the actual documentation for the spec, which displays the picker as Vuetify does, https://material.io/guidelines/components/pickers.html#pickers-time-pickers.
johnleider
on 2 Jun 2017
Not in 24h, does it?
On 2 Jun 2017 5:38 pm, "John Leider" notifications@github.com wrote:
The link you provided links to the actual documentation for the spec,
which displays the picker as Vuetify does, https://material.io/
guidelines/components/pickers.html#pickers-time-pickers.—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/vuetifyjs/vuetify/issues/676#issuecomment-305842321,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACrvmU4X01VD_Ht1Nd-sV0mAV-qdSW_bks5sADp9gaJpZM4Nugxo
.
duebbert
on 2 Jun 2017
The MD spec has no visual aid on the site for what 24hr mode looks like. It had to be assumed to use the same style as 12h.
johnleider
on 2 Jun 2017
Yes, I thought that but the actual material android design for 24h is like
in the link I sent. It's in two circles.
On 2 Jun 2017 6:37 pm, "John Leider" notifications@github.com wrote:
The MD spec has no visual aid on the site for what 24hr mode looks like.
It had to be assumed to use the same style as 12h.—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/vuetifyjs/vuetify/issues/676#issuecomment-305860816,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACrvmQXh-YL6XCl0ICwhp6pJahb91bsnks5sAEhNgaJpZM4Nugxo
.
duebbert
on 2 Jun 2017
Unfortunately, there are many designs that exist in many places of google that are different. The most surefire thing that I can do is mimic what is on the official spec page (which is updated). Otherwise, it becomes difficult to explain why some components are what they are.
Imagine I make this change, someone comes along, looks at the official spec, and notices that 24hr is different than 12hr and they make a thread like this saying I'm not in spec. It's slippery slope.
johnleider
on 2 Jun 2017
Sure, that's fair enough. But does the official specs page show an example
for 24h? Because I'm using stock android and it's definitely like the
example link I've provided and that's consistent. I've never once had the
24h one ring that vuetify does at the moment.
On 2 Jun 2017 6:43 pm, "John Leider" notifications@github.com wrote:
Unfortunately, there are many designs that exist in many places of google
that are different. The most surefire thing that I can do is mimic what is
on the official spec page (which is updated). Otherwise, it becomes
difficult to explain why some components are what they are.Imagine I make this change, someone comes along, looks at the official
spec, and notices that 24hr is different than 12hr and they make a thread
like this saying I'm not in spec. It's slippery slope.—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/vuetifyjs/vuetify/issues/676#issuecomment-305862565,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACrvmesHFhowavzav9uYarAsD3dww9LDks5sAEm6gaJpZM4Nugxo
.
duebbert
on 2 Jun 2017
No, the spec does not have an official example. I've spoke with some of the team and I don't have an issue doing this, but it will be low priority for now.
johnleider
on 2 Jun 2017
This here is useful to see the native Android 24h time picker. From React-Native: https://facebook.github.io/react-native/docs/timepickerandroid.html
To see the native Android Material time picker:
- Click "Run this example" and wait a few minutes as it takes a while to start.
- Search for "TimePicker"
- Click on "TimePickerAndroid"
- Click on "Time picker with 24 hours format"
Then it shows the native 24h time picker like this:
(This might actually also be useful to check other Material Design aspects that are not clearly spelt out in the spec.)
duebbert
on 6 Jun 2017
Aside from there not being a clear consensus about whether stock android should be considered default canon, that approach is much clearer.
The current implementation is quite counter-intuitive for our less technical users, since 24h clocks don't look anything like that, but they aren't quite used to the AM/PM approach either.
So here's my +1 to this enhancement.
keystorm
on 20 Jun 2017
Fixed with #880
johnleider
on 4 Jul 2017
![lock[bot] picture](https://avatars1.githubusercontent.com/in/6672?v=4&s=40)
lock[bot]
Related issues
itanka9
·
3Comments
KuroThing
·
3Comments
Antway
·
3Comments
aaronjpitts
·
3Comments
sebastianmacias
·
3Comments
Most helpful comment
Aside from there not being a clear consensus about whether stock android should be considered default canon, that approach is much clearer.
The current implementation is quite counter-intuitive for our less technical users, since 24h clocks don't look anything like that, but they aren't quite used to the AM/PM approach either.
So here's my +1 to this enhancement.