Uploaded image for project: 'MusicBrainz Server'
  1. MusicBrainz Server
  2. MBS-8074

Improve behaviour of date fields on mobile devices

XMLWordPrintable

    • Icon: Improvement Improvement
    • Resolution: Unresolved
    • Icon: Normal Normal
    • None
    • None
    • Editing interface
    • Mobile

      On a normal desktop computer, while the date fields could be improved (see e.g. MBS-1197), they work sufficiently well with a physical keyboard and mouse. On mobile devices, which have neither, I think it's a lot more annoying.

      For example, to enter a date, you have to tap the first field, which brings up the alphabetic keyboard, but then you have to switch to the numeric keyboard to enter numbers or long press the letters, neither of which are particularly fast ways of doing it. Then you have to repeat that twice more for the month and day, and another three times if you want an end date too.

      The single date fields in MBS-1197 would be an improvement simply because that would mean fewer fields, but there are a couple of other things which might help:

      One approach would be to open the numeric keyboard by default. There are a few things which trigger that, such as type="number", type="tel" and (only in iOS) setting pattern="[0-9]" (or pattern="\d" but I prefer the former since the latter means paying attention to whether your backslashes are escaped correctly).

      type="number" might work, but it adds spinners on desktop devices which might be weird and I've seen some reports of odd behaviour if you try to use it for strings of digits rather than true integers, so I think this approach would need some investigating.

      type="tel" is semantically completely wrong, so I haven't even tried that although maybe it would work.

      I tried pattern="[0-9]*" but ended up reverting it because we have a few negative years which it would break (conversation in https://bitbucket.org/96187/musicbrainz-server/commits/59f4a98d3ccf0749391ad0503306c371cf56f198 ). This approach would either depend on us adding proper support for BC years or deciding we don't actually support it yet and blocking negative years.

      The other approach would be to make use of HTML5's date input type. On desktops, these types are pretty awful and completely inconsistently implemented (as I described in MBS-7478), but as far as I can tell, on mobiles the fields are much easier to use than typing numbers. The biggest problem is that, with the exception of the birthday field in user profiles, our date fields allow any part of the date to be left out, whereas in HTML5 there are different types and they don't cover everything - there's only "date" for YYYY-MM-DD and "month" for YYYY-MM, so nothing for YYYY or for MM-DD - so any approach using either of those types would need some way of falling back to typing manually.

            Unassigned Unassigned
            nikki nikki
            Votes:
            1 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated:

                Version Package