How to disable manual input for JQuery UI Datepicker field?

PhpJquery UiDatepicker

Php Problem Overview


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).

Php Solutions


Solution 1 - Php

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

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

Solution 2 - Php

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;"/>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBeeDogView Question on Stackoverflow
Solution 1 - PhpMatthew JacobsView Answer on Stackoverflow
Solution 2 - PhpKarim SamirView Answer on Stackoverflow