Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I tell if a browser supports <input type='date'>

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)?

like image 458
DaedalusFall Avatar asked Apr 17 '12 14:04

DaedalusFall


People also ask

Does Safari support input type date?

Sadly, support for date input seems to be completely absent in Safari on a Mac. The date input fields are presented as if they were text boxes, and the default value in the first field is not re-interpreted into a human readable format as with other browsers.

Is input type date accessible?

Custom JavaScript Datepicker controls are almost always inaccessible to keyboard and screen reader users. HTML5 input type="date" will give you an accessible date picker in most browsers, but not all like Safari macOS where native datepickers are not supported yet.


1 Answers

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); } 
like image 178
Italo Borssatto Avatar answered Sep 30 '22 13:09

Italo Borssatto