JQuery input[type=date] selector

Question

I have an input with the type set as "date" (html5):

<input id="Employee_hireDate" class="pickDate" type="date" name="Employee[hireDate]" value="Hire Date" />

When I view the raw source, the type is set as date. However, in Chrome Developer Tools it is not displayed. And when I run:

alert($('#Employee_hireDate').attr('type'));

It shows the input type as undefined. I'm using Google Chrome v15.

Does anyone have an idea of why JQuery can't find the selector?

Logan

Answer 1

You really should not do this, this way. HTML5 date has some very specific UI and a very specific API. For example the following code http://jsfiddle.net/trixta/EAZPN/ does not work in Opera and it won't be working in Chrome or any other browser, if the browser has implemented type="date" fully.

If you want to make this somehow workable, you have to remove the date and replace it with type text. Additionally you have to make sure, that you always use/generate date-value in the following format YYYY-MM-DD.

There are a lot of other things to make this really good. I have made a small example using webshims lib , which you can find here: http://jsfiddle.net/trixta/VNuct/ .

Webshims lib will hide your original type="date" input and creates a nameless new one, to mimic the visual implementation of a datepicker. It also transfers the input's value from one input to another and transforms this value into the right format. It also gives you the full HTML5 date API:

for example:

$('#Employee_hireDate').prop('valueAsNumber', 1315267200000);
$('#Employee_hireDate').prop('valueADate');

Answer 2

If you check out the JSFiddle from RC's comment, and switch versions of jQuery around, you'll find you only get the correct answer ("date") with jQuery 1.6.2 or later. Make sure you're using the latest version of jQuery!