1297327 - Input with type date value uses incorrect value

Status: RESOLVED DUPLICATE of bug 872630

(Web Compatibility :: Site Reports, defect)

Description

[christiaan]

Attachment: Android Screenshots.zip

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/601.7.7 (KHTML, like Gecko) Version/9.1.2 Safari/601.7.7

Steps to reproduce:

Just try to select a date in a input type=date field and it does not work correctly. 

See the attached screenshots for a comparison of chrome and firefox on an android phone (LG G4) and an android tab (Samsung Galaxy Tab)


Actual results:

When selecting a date (in a somewhat different date-picker then the device's native picker) I see an ISO formatted date value. When leaving the field the value disappears. 


Expected results:

I'd expected a correctly formatted display (in NL formatting). Also, when leaving the field I expect the value to remain

Comment 1

[Alex Caziuc]

Hi Christian,

Can you please give me another example of a website with date picker where this is happening?

Thanks

Comment 2

[christiaan]

Did some more investigation; I think it has to do with the combination of Firefox for android and React (https://facebook.github.io/react/)... 

I have a JSFiddle here that does seem to hold the input's value, although display is in incorrect format (expected locale format) https://jsfiddle.net/uptbswbe/2/

However, the following JSFiddle shows that React does not get the correct value:  
http://jsfiddle.net/jwm6k66c/971/

After filling in a date, it should show up after the 'Hello world' text

So: the first JSFiddle does work in a way, although: 
1. It is a different datepicker than the native one (could be by design, i don't know)
2. It does use incorrect format for displaying the selected date (should be dd-mm-yyyy instead of ISO YYYY-MM-DD

The second JSFiddle has the same issues BUT also has: 
3. React Does not know what value is selected. 

So basically: The fact that the value is not maintained might be a React problem, i will look into that some more BUT the input does show an incorrectly formatted date. I do expect it's value to be in YYYY-MM-DD format, but it should be displayed in the browser's locale setting (dutch in this case). Also I'd expect the native datepicker instead of another one, although that's a minor issue. 

Hope this helps.

Comment 3

[christiaan]

This is a better JSFiddle for date picker in combination with React, the selected date should show up right next to the input: http://jsfiddle.net/adaniliuk/srt6mp0p/

Comment 4

[Alex Caziuc]

Thank you for the info Christian.

I'm able to reproduce this using: Galaxy Note 5 (Android 6.0.1) on 48 Release.

On Chrome it works properly, it shows the date correctly.

Hey Mike what is your opinion on this? Is it on Tech Evangelism component or a FF for Android bug?

Thanks

Comment 5

[Karl Dubost💡 :karlcow]

Bug 1283381 is a collection of issues related to <input type=date> which is still partially implemented on Desktop. 

but for the localization issue it seems to be a duplicate of Bug 872630 

See also https://bugzilla.mozilla.org/buglist.cgi?list_id=13184147&short_desc=input%20date&resolution=---&query_format=advanced&short_desc_type=allwordssubstr&product=Firefox%20for%20Android