Get input value from HTML5 input[type="date"] in chrome

Question

In chrome, a tag like

<input id="picker" type="date">

renders as a text field. However, calling trying to get its value with something like

$("#picker").val()

returns nothing until a valid date is entered or picked from it's dropdown. I took a look at all of the object's immediate properties on a keypress with

$("#picker").keypress(function() {
    var output = ""
    for (var i in this) {       
        output += i +" value:"+ this[i] + "\n";
    }
    alert(output);
});​

but couldn't see my input in any of these. Check for yourself at http://jsfiddle.net/5cN2q/

My question is: Is it possible to get the text from a input[type="date"] in chrome when the input is not a valid date?

Answer 1

The W3C Date State spec defines the sanitization algorithm:

• The value sanitization algorithm is as follows: If the value of the element is not a valid date string, then set it to the empty string instead.

Which is invoked whenever setting the value of the input element, as defined in DOM input value spec:

• On getting, it must return the current value of the element. On setting, it must set the element's value to the new value, set the element's dirty value flag to true, invoke the value sanitization algorithm, if the element's type attribute's current state defines one, and then, if the element has a text entry cursor position, should move the text entry cursor position to the end of the text field, unselecting any selected text and resetting the selection direction to none.

So the value property will always be an empty string when the date is not valid. There doesn't seem to be any property for "original/dirty/user-typed text value" specified as it is not a text input after all.

IMO it is a good thing, it facilitates form validation as invalid dates are treated as falsy values (empty strings), it also leaves browsers to more freely implement the UI for date inputs.

If you prefer a non-W3C date input, you can use a text input with the good old JS date validation and a datepicker, such as the jQuery UI datepicker. This would allow you to retrieve the actual text value of the input and is a much more cross-browser solution as well.