How to disable manual input for jQuery UI Datepicker field?

Question

I decided to use the jQuery UI Datepicker script to select dates. The following is part of my code and the way I integrated it into my PHP page:

<link type="text/css" href="css/south-street/jquery-ui-1.8.6.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script> <script type="text/javascript"> $(function(){ // Datepicker $('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' }); //hover states on the static widgets $('#dialog_link, ul#icons li').hover( function() { $(this).addClass('ui-state-hover'); }, function() { $(this).removeClass('ui-state-hover'); } ); }); </script> 

and

  // date picker (embeds JQuery script) echo '<label for="datepicker">Date: </label>'; echo '<input type="text" name="datepicker" id="datepicker" />'; echo '<div id="datepicker"></div>'; 

To a large extent according to the jQuery UI instructions.

Now my question is: how can I turn off manual inputs in a text input field? I want a jQuery Datepicker script to be able to populate a text box. As far as I can see, the script currently does not allow the user to enter any non-numeric characters in the text box, but any combination of numbers is allowed (therefore gibberish like "95460829468" is allowed).

Answer 1

When you make input, set it to be read only.

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

Answer 2

I think you should add style = "background: white;" make it writable

 <input type="text" size="23" name="dateMonthly" id="dateMonthly" readonly="readonly" style="background:white;"/>