Problem
For date selection, I choose to utilize the JQuery UI Datepicker script. Part of my code, as well as how I integrated it into my PHP page, is shown below:
<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>';
Basically, I followed the JQuery UI guidelines.
Now here’s my question: how can I prevent manual text inputs in the text input field? The JQuery Datepicker script should only be able to fill the text field. As far as I can tell, the script currently prohibits the user from entering any non-numerical characters into the text box, yet any number combination is permitted (therefore, gibberish like “95460829468” is allowed).
Asked by BeeDog
Solution #1
Set the input to readonly when you create it.
<input type="text" name="datepicker" id="datepicker" readonly="readonly" />
Answered by Matthew Jacobs
Solution #2
I believe you should include style=”background:white;” to make it appear editable.
<input type="text" size="23" name="dateMonthly" id="dateMonthly" readonly="readonly" style="background:white;"/>
Answered by Karim Samir
Post is based on https://stackoverflow.com/questions/4164542/how-to-disable-manual-input-for-jquery-ui-datepicker-field