adfinis/timed

[ENHANCEMENT]: auto-format time when entering

hairmare opened this issue · 4 comments

hairmare commented

Your proposed enhancement

Would it be possible to get "auto-formatting" during entering the time

Enhancement Impact

, e.g. if I type in "730" - it would be auto-formatted into "07:30", or "1615" -> "16:15", "15" would become "15:00". ?

as above, e.g.
07 becomes 07:00
15 becomes 15:00
830 becomes 08:30
1615 becomes 16:15

Additional context

This is a verbatim copy of #30 I'm creating it because i love the issue, it should be our true-north UX! Hence i wanna push it and i feel bad pinging the previous author at every point since he isn't subject to timed anymore.

Required

  • I have checked past issues to ensure that this isn't a duplicate.
hairmare commented

last time i implemented this ages ago my team ended up going numerical first and just ignoring any other chars

this helped the 00.15 folks as well and was generally numpad friendly

derrabauke commented

Simply using type="time" should improve the UX with the least effort. Do you think the like @hairmare? 🤷‍♂️

We could remove the clock icon for the input with

input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
}
hairmare commented

on my desktop <input type="time"> does seem to work. do you have any clue how well it works on mobile nowadays? didn't <input type="time"> have some a11y issues in the past?

derrabauke commented

on my desktop <input type="time"> does seem to work. do you have any clue how well it works on mobile nowadays? didn't <input type="time"> have some a11y issues in the past?

This should be fine by now. Problematic mobile browsers (older Safari) will fallback to text input and should be covered by a pattern attribute on the input, which we already have currently in place. Further I assume, iOS users are more up to date with their browsers in comparison to android folks (caused by planned obsolescence by 🍏).

  • 👍1