1318046 - Input type="date" doesn't allow switching between years

Status: RESOLVED FIXED

(Firefox for Android Graveyard :: General, defect, P1)

Description

[miroslav]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36

Steps to reproduce:

Tap on any input type="date" form field.


Actual results:

Firefox will show date input popup where I can swipe between months, but I can't easily switch to a different year. This is extremely inconvenient if the date is considerably different from the provided default value. Date of birth is a good example - if the default is today, then 30 years old person will have to swipe 360 times to get to his birth date. Typing it in isn't an option as the date picker will override keyboard input.


Expected results:

Chrome allows taping the year in the dialog to select year directly.

Comment 1

[Sorina Florean [:sflorean]]

Thanks for report!

Tested with Nexus 9 (Android 7.0) and LG G4 (Android 5.1) on all branches, and I was able to reproduce this. On Firefox I can't switch to another year, but on Chrome this is possible.
I will mark this as NEW and set the flags accordingly.

Comment 3

[Massimiliano]

I'm not a great fan of "bump" or "+1", but this bug is really disappointing.
Worst thing is that some times ago (sorry, can't remember when nor which version was) it was working perfectly.
Please fix it ASAP! Thanks

Comment 4

[Julien Cristau [:jcristau]]

Mass wontfix for bugs affecting firefox 52.

Comment 5

[Sergiu Logigan [:sergiu]]

The issue is also reproducible on www.voot.com, when creating a new account. The Date of Birth field is affected.
The issue is not reproducible on Chrome (Mobile) 59.0.3071.125.

Comment 8

[u500002]

Sorry for chiming in but I'm also affected by this bug. I just wanted to register myself for the next election in Germany but using the QR code the website is pretty much unusable in Firefox Android because I need to enter my birth date which takes a few hundred swipes.

The LineageOS Browser Jelly by the way eliminates this problem by displaying the year as the first item before the day & month in the date picker. You can then click the year and easily change it.

Comment 9

[Lindhe94]

I can reproduce at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date using Firefox on Android.

Comment 10

[kschepps]

This seems to be an important bug that has been around for about "a year ago" according to the first posting. I'm testing to see if I should make the switch with all this Firefox Quantum hype, but if this is how Mozilla handles their bugs I might need to try a different browser that will sync between my phones and PC's.

Comment 11

[Kris Maglione [:kmag]]

I just ran into this. I had to spend several minutes scrolling through 80-some years * 12 months to get to my birthday. *Twice*. To say that it was infuriating is a bit of an understatement.

https://irccloud.mozilla.com/file/bh8LhKMC

Can we get this prioritized a bit higher?

Not sure who to nag these days. Kevin, Nick, can you please redirect to someone appropriate?

Comment 12

[Kevin Brosnan [Ex-Mozilla]]

Redirecting to the project leads.

Comment 13

[James Willcox (:snorp) ([e-mail]) (he/him)]

The current date picker is implemented in Fennec, and not Gecko or GV. Wesly, can you help triage this?

Comment 14

[Wesly Huang (EPM)]

Indeed inconvenient, something we may consider to do recently and I'll bring it to Sprint 69.5 planning discussion. (keep my ni)

Comment 15

[Nevin Chen(Not active on Bugzilla)]

Hi Sebastian
Do you know why we use custom view for DateTimePicker instead of using Android's system DatePicker/TimePicker?

Thanks!

Comment 16

[Andreas Bovens [:abovens]]

I also think it makes sense to use the system DatePicker/TimePicker rather than our own solution. Better OS integration, easier learning curve.

Comment 17

[Jan Henning [:JanH]]

We already use the default TimePicker for time input: https://dxr.mozilla.org/mozilla-central/source/mobile/android/base/java/org/mozilla/gecko/prompts/PromptInput.java#208

We could presumably likewise also use the system DatePicker for date input fields, and interestingly enough we already do so when according to the source code the SDK is too *old* for our custom date picker [1]. Without some research into the history of this feature I've got no idea though why we decided to use our custom date picker instead of the OS-provided one and what we might need to watch out for when switching back to the system DatePicker.

We will still need our custom DateTimePicker for things like week and month input, though and possibly also for datetime input fields, although the latter part is affected by this bug as well and needs fixing, too.

In the worst case we could try simply switching off the calendar view for datetime fields and just showing spinners for the date as well to make changing years easier, which is also what Chrome does (although a solution that would keep the calendar view available would of course be nicer).

[1] https://dxr.mozilla.org/mozilla-central/rev/21ddfb9e6cc008e47da89db50e22697dc7b38635/mobile/android/base/java/org/mozilla/gecko/prompts/PromptInput.java#187-188, although looking at https://dxr.mozilla.org/mozilla-central/rev/21ddfb9e6cc008e47da89db50e22697dc7b38635/mobile/android/base/java/org/mozilla/gecko/prompts/PromptInput.java#239 I'm not sure if in practice that code path would actually still work

Comment 18

[Wesly Huang (EPM)]

keep it P2 for now as we see other bugs to tackle in Nightly 60 first.

Comment 19

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

[triage] This sucks - let's add it as a P1 and consult higher-level triage if we can get cycles to work on it.

Comment 20

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

Susheel, how important do you think this is? I think it could be a P1 because inputting dates is a simple use case that we're failing at.

Comment 21

[:sdaswani]

Yes, I agree - this should be fixed ASAP. Let me figure out who should fix it.

Comment 22

[:sdaswani]

Removing NI as this is being tracked here: https://bugzilla.mozilla.org/buglist.cgi?priority=P1&emailreporter1=1&resolution=---&emailtype1=notequals&chfieldto=Now&query_format=advanced&chfield=%5BBug%20creation%5D&chfieldfrom=2016-06-01&email1=intermittent-bug-filer%40mozilla.bugs&component=Activity%20Stream&component=Awesomescreen&component=Custom%20Tabs&component=Download%20Manager&component=Favicon%20Handling&component=First%20Run&component=General&component=Locale%20switching%20and%20selection&component=Logins%2C%20Passwords%20and%20Form%20Fill&component=Metrics&component=Overlays&component=Profile%20Handling&component=Reader%20View&component=Screencasting&component=Search%20Activity&component=Settings%20and%20Preferences&component=Text%20Selection&product=Firefox%20for%20Android&list_id=13989016

Comment 24

[Petru-Mugurel Lingurar [:petru]]

Attachment: date_picker_comparison

Comment 25

[Petru-Mugurel Lingurar [:petru]]

Attachment: time_picker_comparison.png

Comment 26

[Petru-Mugurel Lingurar [:petru]]

Attachment: date_time_picker_comparison.png

Comment 27

[Petru-Mugurel Lingurar [:petru]]

Thanks for posting your findings Jan!

I started also investigating this and found the original implementation to be from 6 years ago [1]
Found some reasoning for our custom DateTimePicker - [2]
Basically at that time, our implementation ported the newly introduced picker widgets to lower api's.
Because nothing changed in the meantime code-wise I guess this problem is 6 years old.

Tested various possible input times with a simple jsfiddle - https://jsfiddle.net/x61pj77L/ and found that indeed there are differences versus Chrome, and we should do better. I'll post my findings below.

- In regards to a picker for "date" please refer to attachment 8972922 [details]
Here you can see how Firefox currently displays a date picker. Indeed the user cannot directly select a year, he can just scroll upwards until he get to the needed date. On Chrome if the user taps on the year he can select any year.
What's more, if the initial try to use a DateTimePicker fails the app resorts to use the platform's DatePicker [3] and then will crash because of a cast exception [4] 
Also I think widget's header's colours scheme (2nd screenshot in the image) could be better.

- In regards to a picker for "time" please refer to attachment 8972924 [details]
It is already using platform's picker, all good, but again, I think the color scheme could be improved.

- In regards to a picker for "datetime / datetime-locale" please refer to attachment 8972925 [details]
As Jan said this part is also affecting by the bug and the user cannot select the year here also. He can just scroll until he gets to the desired date.
AFAIK Android does not allow a built-in widget for allowing users to select date and time at the same time.

This is why I think we should port the DatePicker widget in our code for DateTimePicker to allow selecting the year also and basically get the UX that Chrome offers.
And also maybe change the color scheme..
 

[1]https://bugzilla.mozilla.org/show_bug.cgi?id=730330
[2]https://bugzilla.mozilla.org/show_bug.cgi?id=730330#c19
[3]https://dxr.mozilla.org/mozilla-central/source/mobile/android/base/java/org/mozilla/gecko/prompts/PromptInput.java#186
[4]https://dxr.mozilla.org/mozilla-central/source/mobile/android/base/java/org/mozilla/gecko/prompts/PromptInput.java#246

Comment 28

[Jan Henning [:JanH]]

(In reply to Petru-Mugurel Lingurar[:petru] from comment #27)
> - In regards to a picker for "datetime / datetime-locale" please refer to
> attachment 8972925 [details]
> As Jan said this part is also affecting by the bug and the user cannot
> select the year here also. He can just scroll until he gets to the desired
> date.
> AFAIK Android does not allow a built-in widget for allowing users to select
> date and time at the same time.
> 
> This is why I think we should port the DatePicker widget in our code for
> DateTimePicker to allow selecting the year also and basically get the UX
> that Chrome offers.
> And also maybe change the color scheme..

We should be able to turn the calendar view off and replace it by a set of spinners for the date by simply using the toggleCalendar() method provided by our DateTimePicker implementation: https://dxr.mozilla.org/mozilla-central/rev/f877359308b17e691209e1afb7193b8e86f175ce/mobile/android/base/java/org/mozilla/gecko/widget/DateTimePicker.java#528

As for the colour scheme, I had already filed bug 1412518 for that.

Comment 29

[:sdaswani]

Thanks for the deep analysis Petru! Is there a level of effort difference between your suggestion and Jan's?

Comment 30

[Jan Henning [:JanH]]

My suggestion only applies to the datetime/datetime-local input control. The plain date picker still needs replacing by the system date picker.

Comment 31

[Petru-Mugurel Lingurar [:petru]]

Attachment: Bug 1318046 - Allow inputting years for "date" and "datetime" html input types;

For "date" I switched to using platform's DatePicker in place of our custom DateTimePicker, change that will also ensure future feature compatibility.
For "datetime" and "datetime-local" I've kept using our DateTimePicker but which will now offer spinners for selecting all fields.

Review commit: https://reviewboard.mozilla.org/r/241660/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/241660/

Comment 32

[Petru-Mugurel Lingurar [:petru]]

Attachment: recorded test of all supported date related input types.mp4

I went with what Jan suggested as that is the simplest solution, which will ensure future compatibility and also resembles what Chrome offers.

When users will have to input "date" they will be presented with a default, platform widget which also let's them easily change the years.
When users will have to input "datetime" / "datetime-local" they will be presented with spinners that allow setting all required fields.

Comment 33

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

Comment on attachment 8973166 [details]
Bug 1318046 - Allow inputting years for "date" and "datetime" html input types;

https://reviewboard.mozilla.org/r/241660/#review248038

Thanks for the thorough explanations, screenshots, and videos, Petru – that was really helpful!

I'd be lying if I said I really understood this calendar code but given the (amazingly thorough) video, these changes seem reasonable. Have you tested on lower API levels? We should make sure they're still working and look okay (but considering we're largely using platform components, it's probably fine).

I don't think it's worth the turn-around time to fix up these nits but FYI for future reference.

::: mobile/android/base/java/org/mozilla/gecko/prompts/PromptInput.java:176
(Diff revision 1)
>          public DateTimeInput(GeckoBundle obj) {
>              super(obj);
>          }
>  
> +        // Will use platform's DatePicker and TimePicker to let users input date and time using the fancy widgets.
> +        // For the other input types our custom DateTimePicker will offer spinners.

nit: it'd be good to explain why we chose to do it this way. Comments are usually reserved for explaining the why rather than the what (which the code already does).

::: mobile/android/base/java/org/mozilla/gecko/prompts/PromptInput.java:240
(Diff revision 1)
> -                DateTimePicker dp = (DateTimePicker)mView;
> +                DatePicker dp = (DatePicker) mView;
> +                GregorianCalendar calendar =
> +                        new GregorianCalendar(dp.getYear(), dp.getMonth(), dp.getDayOfMonth());
> +                return formatDateString("yyyy-MM-dd", calendar);
> +            }
> +            else {

nit: `} else {`

Comment 34

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

FYI: dropped the issues in Reviewboard so I could autoland it.

Comment 35

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ebcbcffb286f
Allow inputting years for "date" and "datetime" html input types; r=mcomella

Comment 36

[Arthur Iakab [arthur_iakab]]

https://hg.mozilla.org/mozilla-central/rev/ebcbcffb286f

Comment 37

[Kris Maglione [:kmag]]

Thank you!

Comment 38

[Oswald Fischer]

I have test with Firefox Nightly (Android) on ing-diba.de and open an account (https://produkte.banking.ing-diba.de/pub/girokonto-antrag-anfragen?x=smn5uvrjENvs). Here is a date "Geburtsdatum" (date of birth). There I can't scroll the years. And on the begin the color of the year is bad identifiably.

Comment 39

[Oswald Fischer]

(In reply to Oswald Fischer from comment #38)
> I have test with Firefox Nightly (Android) on ing-diba.de and open an
> account
> (https://produkte.banking.ing-diba.de/pub/girokonto-antrag-
> anfragen?x=smn5uvrjENvs). Here is a date "Geburtsdatum" (date of birth).
> There I can't scroll the years. And on the begin the color of the year is
> bad identifiably.

Vision is 62.0a1 on moto G5 plus

Comment 40

[Jan Henning [:JanH]]

(In reply to Oswald Fischer from comment #38)
> I have test with Firefox Nightly (Android) on ing-diba.de and open an
> account
> (https://produkte.banking.ing-diba.de/pub/girokonto-antrag-
> anfragen?x=smn5uvrjENvs). Here is a date "Geburtsdatum" (date of birth).
> There I can't scroll the years. And on the begin the color of the year is
> bad identifiably.

I assume you're seeing what I've been seeing in bug 1460074? As for the colour scheme, see bug 1412518.

Comment 41

[Oswald Fischer]

(In reply to Jan Henning [:JanH] from comment #40)
> (In reply to Oswald Fischer from comment #38)
> > I have test with Firefox Nightly (Android) on ing-diba.de and open an
> > account
> > (https://produkte.banking.ing-diba.de/pub/girokonto-antrag-
> > anfragen?x=smn5uvrjENvs). Here is a date "Geburtsdatum" (date of birth).
> > There I can't scroll the years. And on the begin the color of the year is
> > bad identifiably.
> 
> I assume you're seeing what I've been seeing in bug 1460074? As for the
> colour scheme, see bug 1412518.

Web: go on https://produkte.banking.ing-diba.de/pub/girokonto-antrag-anfragen?x=smn5uvrjENvs an click on "Konto eröffnen".