How to disable manual input for JQuery UI Datepicker field?

I decided to use the JQuery UI Datepicker script for picking dates. Below 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>';

Pretty much according to the JQuery UI instructions.

Now my question is: how can I disable manual inputs in the text input field? I only want the JQuery Datepicker script to be able to fill the text field. As far as I can see, the script currently prevents the user from entering any non-numerical characters into the text field, but any combination of numbers is allowed (therefore, gibberish like "95460829468" is allowed).

147037 次浏览

When you make the input, set it to be readonly.

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

I think you should add style="background:white;" to make looks like it is writable

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