jQuery Date Picker where text input is read only
Solution 1
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();
});
Solution 2
Extending nc3b's answer:
$("#input-id").keydown(function (e)
{e.preventDefault();});
will prevent keys such as backspace, delete, etc. Otherwise, you could have a date like 11/11/2012, and a user could backspace it to 11/11/201 and technically, thats still a valid date according to JS.
Solution 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' });
Related videos on Youtube
Rowan Parker
Updated on June 04, 2022Comments
-
Rowan Parker almost 2 years
I want to use the Jquery datepicker. I've got it setup using an the alt field option. I'm displaying D/M/Y 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 had 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?
-
Jignesh almost 10 yearsKey press also prevents copy paste as well. at-least it works for me.