Help with disabling text input except from MattKruse Calendar

Hi,

I am a complete novice and lay person and would be very grateful for some assistance with this. I have some knowledge of html and have learned a (very little) javascript in the process of doing this task.

I have used the Matt Kruse calendarpopup.js to create a calendar for a website which allows the users to select a date from the popup, which appears in a textbox.

This works fine, but I would like to be able to prevent users from typing in the textbox except by using the calendar popup. My concern is that whilst the calendar has certain dates disabled (by me), users can still type in the textbox.

I have looked at some "disabled form" suggestions but they don't quite seem to cover this/are beyond my understanding! As I have such limited expertise i would really like to be able to do this in the simplest possible way.

The alternative seems to me to be a script that would pop up the calendar when the text box is clicked rather than when the word/link "select" is clicked next to it, thereby preventing any typing in the text box.

The Matt Kruse calendar script is at www.mattkruse.com/javascript/calendarpopup/CalendarPopup.js. In case it is helpful, here is the script in the external Mastercalendar.js I have created to set disabled dates (as the calendar will appear on several different pages), in the head of my document, and in the body of my document:


var now = new Date();
var cal1 = new CalendarPopup;
now.setDate(now.getDate()+2);
cal1.setWeekStartDay(1);
cal1.setDisabledWeekDays(0,6);
cal1.addDisabledDates(null,formatDate(now,"yyyy-MM-dd"));
cal1.addDisabledDates("02/09/10");
cal1.addDisabledDates("08/14/10", "08/28/10");
cal1.addDisabledDates("03/31/10", null);
_____________
<SCRIPT LANGUAGE="JavaScript" SRC="CalendarPopup.js">
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="Mastercalendar.js">
</SCRIPT>

_____________

<input type="text" name="itemname3" value="" SIZE=25>
<a href="#"
onClick="cal1.select(document.forms['example'].itemname3,'anchor1','dd/MM/yyyy'); return false;"
name="anchor1" ID="anchor1">select</A>

_____________

Sorry for the long question!

 

I found the answer - I just had to insert read-only into the tag.