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');