JQuery date picker where read-only text input

Question

I want to use jquery datepicker. I have a setup using the alt field option. I show D / M / Y in the text box, but send YMD. So far, everything is working fine, sending the correct data, etc.

However, I want the user to not be able to manually enter the date. I initially set the disabled INPUT field, which worked in every browser except IE. In IE, it will pop up in the date picker, but then it won't close after clicking the date.

Does anyone know a better way to do this?

Answer 1

To prevent the user from manually editing the input, I would attach a keypress event and return false / prevent default from the handler. That way, if it has javascript, it can use datepicker, and if not, it can manually edit the input.

$("#input-id").keypress(function (e) { e.preventDefault(); }); 

Answer 2

Nc3b answer extension:

 $("#input-id").keydown(function (e) {e.preventDefault();}); 

will prevent keys like backspace, delete, etc. Otherwise, you could have the date 11/11/2012, and the user could postpone it until 11/11/2011 and technically, this is still a valid date according to JS.

Answer 3

You can also do this:

 <input type="text" id="datepicker" name="datepicker" readonly="readonly" /> 

See the readonly attribute above.

If you also want the calendar to show when the <input> has focus, add this:

 $("#datepicker").datepicker({ showOn: 'both' }); 

Answer 4

After disabling the input field, use the destroy method to remove the datepicker. When you re-enable the field, simply recreate the datepicker template.

 $("#target").datepicker("destroy");