How can I tell if a browser supports

Question

Possible Duplicate:
HTML5 Type Detection and Plugin Initialization

<input type=date>

Should create an input with an (optional) user-agent provided datepicker, but its not widely supported yet, so we're using a jQuery UI Datepicker. How can we allow browsers to use their own datepicker and fall back on jQuery UI only if the browser doesn't have such a thing?

At present I think only Opera has a built in datepicker, but a test for Opera would obviously be bad. Is there a way this feature can be detected (if it can at all in a portable manner)?

Detecting date support is complicated by the fact that different browsers support dates to different levels. Some offer a nice calendar date-picker. Others just validate it looks like a date. — rjmunro, Sep 14 '12 at 10:09
Exactly why I asked the question. I wanted to know if the browser has a datepicker, not if it claims to understand date inputs. It is not AFAICT a duplicate, and the answers below don't help. I just never got round to updating or contesting. I just went with `` and always use jquery ui datepicker (the old fashioned way). — DaedalusFall, Oct 11 '12 at 12:45
It should be noted on desktop browsers the date input UI often leaves something to be desired. Even if they support it, you may not want to use it. This problem does not seem to affect mobile browsers. — rich remer, Jan 06 '16 at 18:29

Italo Borssatto · Answer 1 · 2018-01-18T13:09:35.027

150

The method bellow checks if some input type is supported by most of the browsers:

function checkInput(type) {
    var input = document.createElement("input");
    input.setAttribute("type", type);
    return input.type == type;
}

But, as simonox mentioned in the comments, some browsers (as Android stock browsers) pretend that they support some type (as date), but they do not offer an UI for date inputs. So simonox improved the implementation using the trick of setting an illegal value into the date field. If the browser sanitises this input, it could also offer a datepicker!!!

function checkDateInput() {
    var input = document.createElement('input');
    input.setAttribute('type','date');

    var notADateValue = 'not-a-date';
    input.setAttribute('value', notADateValue); 

    return (input.value !== notADateValue);
}

edited Jan 18 '18 at 13:09

answered Apr 17 '12 at 21:17

Italo Borssatto

15,044
7
62
88

8

Doesn't work in the android stock browser, it returns true but does not have support for datepicker – Björn Andersson Mar 11 '13 at 14:24
36

Asking for the type attribute does not work in all Android stock browsers. They pretend htat they support inputType=date, but they do not offer a UI for date inputs. This feature detection worked for me: function() { var el = document.createElement('input'), notADateValue = 'not-a-date'; el.setAttribute('type','date'); el.setAttribute('value', notADateValue); return !(el.value === notADateValue); } The trick is to set an illegal value into a date field. If the browser sanitises this input, it could also offer a datepicker. – simonox Oct 09 '13 at 14:15
You can tighten that comparison in the first example to a strict equality. `input.type` is a string. – Michael Cordingley Sep 20 '18 at 15:52
You can also use [Modernizr](https://modernizr.com/) to detect this feature with this snippet `if(Modernizr.inputtypes.week) //ok the browser support this!` – JoDev Sep 24 '18 at 08:47
Thank goodness for this. I knew there was something for old Android, when reading https://www.quirksmode.org/blog/archives/2017/02/making_input_ty.html , and searched all over just to find out I'd already +1'd and put this in a util file. – Feb 04 '19 at 13:39
This does not work in Safari 14 because `input.setAttribute('value', notADateValue)` does not set the value – Damiaan Dufaux Oct 12 '20 at 15:27
in 2020, only Safari remains...the new IE! – benzkji Oct 27 '20 at 09:56
1

This is great. Another gotcha is that with the date input you set and retrieve the date as yyyy-mm-dd and it will display it in your locale format. Without this you need to format the date to the locale when setting an existing value, and convert it back for database storage or processing – james-geldart Feb 18 '21 at 10:57

How can I tell if a browser supports

1 Answers1

Linked