Why has Chrome on Android's native HTML5 date picker become really slow?

Question

I have a date picker on my site that just uses the default html5 date picker.

I've noticed that up until a couple of weeks ago, it was working fine but ever since a recent update on Chrome Android, they've introduced a new date picker and this date picker is really slow and unresponsive. It takes several seconds to load up and i find it really hard to pick any dates.

I have a demo site illustrating it (http://datapickerandroid.meteor.com/). I've tested it on a Nexus 7 2013 and HTC one M8 and Chrome on Android both have this problem. I've also tested it with dolphin and firefox and also on desktop browsers, they seem fine so it looks like it's a problem with the date picker on chrome.

I'm wondering what's going on? Is there just a bug within Chrome Android? Is it happening for my devices only? Am I declaring my date picker in an incorrect way? Is it possible to specify to the browser I would like to use the old date picker? I'm also using Meteor (although in the demo, I removed all non-default packages), could it be something to do with that?

Answer 1

See crbug.com/441060 . You can avoid this slowness by specifying min= and max= attributes.

Answer 2

For a bit more info, I did some playing around with setting no min/max, max only, and min and max. Each has different behaviour/performance.

No min or max - clicking in Android will be very slow

<input type="date">

Max only - clicking in Android will set your default value to 01/01/0001 - the first day ever. Not useful

<input type="date" max="1979-12-31">

Min and max - default date is today, and it loads very quickly!

<input type="date" min="0001-01-01" max="9999-12-31" >

https://jsfiddle.net/gpjc3xam/16/

---

Update

For anyone using this solution with Angular, please note that a min date in the year 0001 will not work. It seems that the year 100 is the lowest Javascript will allow...