PART A:
I know there are a lot of things out there that tell you if a browser supports a certain HTML5 attribute, for example http://diveintohtml5.info/detect.html, but they don't tell you how to acquire the type from individual elements and use that info to init your plugins.
So I tried:
alert($("input:date"));
//returns "[object Object]"
alert($("input[type='date']"));
//returns "[object Object]"
alert($("input").attr("type"));
//returns "text" ... which is a lie. it should have been "date"
None those worked.
I eventually came up with this (that does work):
var inputAttr = $('<div>').append($(this).clone()).remove().html().toLowerCase();
alert(inputAttr);
// returns "<input min="-365" max="365" type="date">"
Thanks: http://jquery-howto.blogspot.com/2009/02/how-to-get-full-html-string-including.html
So my first question: 1. Why can I not read the "type" attribute in browsers that don't support html5? You can make up any other attribute and bogus value and read it. 2. Why does my solution work? Why does it matter if its in the DOM or not?
PART B:
Below is a basic example of what I am using the detector for:
<script type="text/javascript" >
$(function () {
var tM = document.createElement("input");
tM.setAttribute("type", "date");
if (tM.type == "text") {
alert("No date type support on a browser level. Start adding date, week, month, and time fallbacks");
// Thanks: http://diveintohtml5.ep.io/detect.html
$("input").each(function () {
// If we read the type attribute directly