jQuery Date Picker where text input is read only

Question

Hi all,

I want to use the Jquery datepicker. I've got it setup using an the alt field option. I'm displaying Y-M-D in the text field, but submitting Y-M-D. Everything works fine so far, sending the correct data, etc.

However I want to stop the user from being able to manually type a date. I add originally set the INPUT field to disabled, which worked in every browser except IE. In IE it would popup the date picker but then not close after clicking a date.

Does anyone know the best way to do this?

Answer 1

After disabling the input field, use the destroy method to remove the datepicker. When re-enabling the field, just re-create the datepicker again.

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

Answer 2

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

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