md-datepicker: add md-timepicker and md-datetimepicker... #4745

Activity

1. arlowhite commented on Sep 21, 2015

   

   arlowhite

   on Sep 21, 2015

   More actions

   Just my 2 cents on time input since I've been thinking about it. (in the context of mobile in particular)

   HTML has a time type. It is up to the browser/OS what UI to show.

   <input type="time">

   Firefox

   Doesn't do anything special if I remember right.

   Chrome

   Has a nice UI and formats the time as you type with a colon. It also provides an AM/PM selector.

   Problems:

   • There's an X that looks like it would clear, but does nothing.
   • The spinner buttons are too small for desktop.
   • The initial focusing click changes the selected field instead of always selecting hours first!
     • Even with a blank input, if you click toward the right of the input, AM/PM is selected first.

   Android 4

   Android 4 has 3 spinners (+- on each) with buttons: Set, Clear, Cancel

   Problems:

   Personally I hate this UI. It takes way too many clicks to change values. For example to retype minutes:

   1. click minutes
   2. text is not auto-selected, so probably need to click again to get cursor on the right-side
   3. Backspace, backspace
   4. Type numbers

   In my opinion spinners for choosing a number are overly awkward.

   Android 5

   New analog clock style.

   Problems:

   • Animations between hours and minutes slows down input
   • Selecting minutes requires high precision. i.e. 00 vs 59 vs 01

   Recommendation

   I think Desktop and Mobile need to be done differently. In Desktop, you may have users with their hand on the mouse that want to set the time with the mouse only. Dojo and ExtJS just have a dropdown list of times. Somewhere I came across a UI that had all hours and all minutes (by 5's) in a dropdown that was interesting. (So it's just one click for hour and one click for minutes).

   Mobile recommendation

   My favorite UI, at least for mobile, is what is provided by Android Clock when you create an alarm. Just punch numbers on the keyboard and it does the right thing.

   I think the same thing could be done by using

   <input type="number">

   Though it won't be as nice as the Clock Alarm time input, it gives you a number keyboard on mobile.

   Then you can just punch in 8, 3, 0, click AM/PM toggle and that's it.

   👎React with 👎1Reacted by Rigo B Castro
2. jelbourn commented on Sep 22, 2015

   

   jelbourn

   on Sep 22, 2015

   Contributor

   More actions

   A time selection component is on our radar but isn't planned for the near future.
3. jelbourn

   closed this as completedon Sep 22, 2015
4. stefan-niedermann commented on Oct 1, 2015

   

   stefan-niedermann

   on Oct 1, 2015

   Author

   More actions

   @jelbourn if this is still an issue which is planned to be fixed - why closing it then?
5. jelbourn commented on Oct 1, 2015

   

   jelbourn

   on Oct 1, 2015

   Contributor

   More actions

   Because it's not happening any time soon.
6. mprentic-harris commented on Oct 29, 2015

   

   mprentic-harris

   on Oct 29, 2015

   Contributor

   More actions

   This would indeed be nice to have and seemed to be part of #648. But that issue was closed with just the datepicker. A timepicker is very useful, but it is a very large amount of work. It's understandable to not be in 1.0, but seems like it should at least be on the roadmap post-1.0.
7. AndrewEastwood commented on Oct 3, 2016

   

   AndrewEastwood

   on Oct 3, 2016

   More actions

   any chance to get md-timepicker ?

   👍React with 👍19Reacted by DJ Sharkey, jrcollins4, Antonis , Eric Jeker, Fatih Khoirul Umam, Juan C Gonzalez, Chris3773, Luis Salas Gonzales, ptitdje45, Rigo B Castro and 9 more