JQuery Datepicker with text input that doesn't allow user input.

Question

How do I use the JQuery Datepicker with a textbox input:

$("#my_txtbox").datepicker({
  // options
});

that doesn't allow the user to input random text in the textbox. I want the Datepicker to pop up when the textbox gains focus or the user clicks on it, but I want the textbox to ignore any user input using the keyboard (copy & paste, or any other). I want to filll the textbox exclusively from the Datepicker calendar.

Is this possible?

JQuery 1.2.6
Datepicker 1.5.2

Answer 1

You should be able to use the readonly attribute on the text input, and jQuery will still be able to edit its contents.

<input type='text' id='foo' readonly='readonly'>

Answer 2

To datepicker to popup on gain focus:

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

If you don't want user input, add this to the input field

<input type="text" name="date" readonly="readonly" />

Answer 3

try

$("#my_txtbox").keypress(function(event) {event.preventDefault();});

Answer 4

This demo sort of does that by putting the calendar over the text field so you can't type in it. You can also set the input field to read only in the HTML to be sure.

<input type="text" readonly="true" />

Answer 5

I've found that the jQuery Calendar plugin, for me at least, in general just works better for selecting dates.

Answer 6

If you are reusing the date-picker at multiple places then it would be apt to modify the textbox also via JavaScript by using something like:

$("#my_txtbox").attr( 'readOnly' , 'true' );

right after/before the place where you initialize your datepicker.

Answer 7

<input type="text" readonly="true" />

causes the textbox to lose its value after postback.

You rather should use Brad8118's suggestion which is working perfectly.

$("#my_txtbox").keypress(function(event) {event.preventDefault();});

EDIT: to get it working for IE use 'keydown' instead of 'keypress'

Answer 8

@Adhip: Thanks! Worked for me! :)