HTML5 date picker not working on desktop, only mobile

Question

The HTML5 date picker is only showing on mobile, it doesn't do anything on the desktop site. I am using the below html:

<input type="date" name="req_dobirth" tabindex="13" id="req_dobirth" value="<%=request("req_dobirth")%>" />

The same field on the mobile form is:

<input type="date" name="req_dobirth" tabindex="17" style="width: 92%;" id="req_dobirth" value="<%=request("req_dobirth")%>" />

(only difference being the width)

Any ideas?

Which browsers are you testing with? Not all of them support the `date` input type. — Spudley, Jul 29 '13 at 13:10
Sorry, should have given that info. Only works in Chrome, not firefox, IE or Safari (on mac) — JFar_13, Jul 29 '13 at 13:12
Is there any other alternative that is compatible with more browsers? — JFar_13, Jul 29 '13 at 13:12
the jQueryUI datepicker is a decent alternative that should work in most browsers — James S, Jul 29 '13 at 13:13
Yes, see the polyfill list I linked in my answer -- there are at least two date picker polyfill options listed there. — Spudley, Jul 29 '13 at 13:18

score 0 · Accepted Answer · edited Jun 24 '14 at 07:36

0

Because it has support on IOS/Safari and Chrome/Opera on Desktop.

http://caniuse.com/#feat=input-datetime

edited Jun 24 '14 at 07:36

Kugel

19,354
16
71
103

answered Jul 29 '13 at 13:11

mikach

2,427
2
14
15

Yeah, had jQuery UI datepicker but diue to my numerous jquery scripts, it is conflicting so looking for an easier option. – JFar_13 Jul 29 '13 at 13:14

score 0 · Answer 2 · edited May 23 '17 at 12:30

0

Most desktop browsers still do not support the date input type.

You can find a full browser compatibility chart here: http://caniuse.com/input-datetime

I suggest using a polyfill of some kind (maybe the jQuery datepicker control for example, or see the modernizr polyfill list for more options) as a fall-back for browsers that do not support it.

See this question for more about how to detect browser support: How can I tell if a browser supports <input type='date'>

edited May 23 '17 at 12:30

Community

1
1

answered Jul 29 '13 at 13:16

Spudley

166,037
39
233
307

Thanks for the polyfill answer, I shall look through that as looks just the ticket. – JFar_13 Jul 29 '13 at 14:44
strangely enough, none of the datepicker polyfills i can find work in Safari, even when they claim they do! – Michael Mar 20 '15 at 18:32

HTML5 date picker not working on desktop, only mobile

2 Answers2