I'm trying to customize the calendar here:

http://javascript.internet.com/forms/dynacalendar.html

I've got it looking the way I want, however there are a few things I'd like to accomplish, but have hit a wall.

1. How do I edit the date to show dd/mm/yyyy rather than the day of week, time, date etc

2. Whe the date is selected I'd like it to autofill the text box.

Can someone please help me accomplish this, i'm not a big JS person, so any help would be appreciated!!

Here's my version:
http://charity-funding.us/calendar/calendar.html

and of course the code:

PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<
HTML>
<
HEAD>
<
TITLE>The JavaScript SourceForms DynaCalendar</TITLE>
<
META HTTP-EQUIV="The JavaScript Source" CONTENT "no-cache">
<
META NAME="description" CONTENT="A date selection widget for use with forms. Clean and simple. Uses style sheets for layout.">
<
META NAME="date" CONTENT="2006-05-05">
<
META NAME="channel" CONTENT="Developer">
<
META NAME="author" CONTENT="Michael O'Connell">
<
META NAME="section" CONTENT="Forms">
<
style type="text/css">
<!--
.
dynaCalendarDiv {
  
positionabsolute;
  
displaynone;
  
border1px solid #1C3355;
  
background-colorwhite;
}

.
dynaCalendarTable {
  
border-collapsecollapse;
}

.
dynaCalendarTable th {
    
background-color#000066;
    
cursor: default;
    
width3em;
    
text-aligncenter;
    
text-transformuppercase;
    
border0px solid white;
    
font-familyArialHelveticasans-serif;
    
color#FFFFFF;
    
font-size11px;
    
font-weightbold;
}

.
dynaCalendarTable th.BF {
  
cursorpointer;
}

.
dynaCalendarTable td {
  
border1px solid white;
}

.
dynaCalendarTable td.day {
    
color#006699;
    
cursorpointer;
    
font-familyArialHelveticasans-serif;
    
font-size11px;
    
background-imageurl(calendarBG.jpg);
    
background-repeatrepeat-x;
    
font-weightbold;
    
line-height20px;
    
text-align:center;
}
.
dynaCalendarTable td.daySelected {
    
background-color#000066;
    
font-weightbold;
    
colorwhite;
    
cursorpointer;
    
text-align:center;
    
font-familyArialHelveticasans-serif;
    
font-size12px;
}

.
myText {
  
font-familysans-serif;
  
font-size12px;
  
colorblack;
  
padding-left5px;
}
-->
</
style>
<
script type="text/javascript">
<!--
/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Michael O'Connell :: http://wunder-ful.com */

/**
* Invocation represents a function call in a specific object context with a list of parameters
* This is a very powerful object that allows code to be executed in it's intended context
* from any other context (context = the 'this' for that function).
* There is a perfomance hit to use this (takes about 5x more time) 
* WARNING in IE if you try to use invoke on an object that is in a window that is no longer loaded it will throw "can't execute code in freed script"
* @constructor
* @param targetObj object to invoke a method on (functions not on an object are attached to the window object)
* @param functionName string containing the name of the function to invoke on targetObj
* @param arguments an Array of arguments to invoke the function with (optional)
* @author Mike O'Connell
*/
function Invocation(targetObjfunctionNamearguments) {
  
this.targetObj targetObj;
  
this.functionName functionName;
  
this.arguments arguments;
}

/**
* Actually invoke the function call defined by this instance of Invocation.
* If the object doesn't exist, or the function does not exist it will not try to execute
* @param arguments an Array of arguments to invoke the function with (will be appended to the end of the predefined argument Array)
* @return The return value of the function invoked.
*/
Invocation.prototype.invoke = function(arguments) {
  if(
this.targetObj && typeof this.targetObj[this.functionName] == "function") {
    var 
args this.arguments;
    if(!
args)
      
args = new Array();
    if(
arguments)
      
args args.concat(arguments);
    return 
this.targetObj[this.functionName].apply(this.targetObjargs);
  }
}

/**
* @return the sum of all the offsetTop values from this element to the body
*/
function getTotalOffsetTop(element) {
  var 
offset 0;
  for(var 
element&& i.tagName != "BODY"i.offsetParent)
    
offset+=i.offsetTop;
  return 
offset;
}

/**
* @return the sum of all the offsetLeft values from this element to the body
*/
function getTotalOffsetLeft(element) {
  var 
offset 0;
  for(var 
element&& i.tagName != "BODY"i.offsetParent)
    
offset+=i.offsetLeft;
  return 
offset;
}

/**
* Positions a absolutely positioned element over the anchor.  It will detect body clipping
* and move the right side of the element to the right of the anchor.  The element cannot
* have 
* @param element the element to position
* @param anchor the anchor to position element over
* @param positionVertical position on "top" or "bottom" edge of the anchor
* @param positionHorizontal position on "left" or "right" edge of the anchor
*/
function positionAtAnchor(elementanchorpositionVerticalpositionHorizontal) {
  var 
left getTotalOffsetLeft(anchor);
  
  if(
positionHorizontal == "right")
    
left left anchor.offsetWidth 1;
  
  
//horizontal clip
  
if(left element.offsetWidth document.body.scrollWidth && left element.offsetWidth 0) {
    
left left element.offsetWidth;
    if(
positionHorizontal == "right")
      
left left anchor.offsetWidth;
    else
      
left left anchor.offsetWidth 1;
  }

  var 
top getTotalOffsetTop(anchor);
  if(
positionVertical == "bottom")
    
top top anchor.offsetHeight 1;
  
  
//vertical clip
  
if(top element.offsetHeight document.body.scrollHeight && top element.offsetHeight 0) {
    
top top element.offsetHeight;
    if(
positionVertical == "bottom")
      
top top anchor.offsetHeight;
    else
      
top top anchor.offsetHeight 1
  }

  
element.style.top top+"px";
  
element.style.left left+"px";
}


// ===========================

//map of dynaCalendars by name
var dynaCalendars = {};

/**
* Opens / closes the dynacalendar at the specified anchor
* @param name The unique name for the calendar to open.
* @param anchor A element to open the calendar under
**/
function openDynaCalendar(nameanchor) {
  var 
calendar dynaCalendars[name];
  if(!
calendar.isOpen)
    
calendar.open(anchor);
  else
    
calendar.close();
}

/**
* Constructor for the DynaCalendar
* @param name A unique name for this calendar
* @param invocation The function to pass the date when a date is selected. 
* @param year Year to start calendar.
* @param month Month to start calendar.
* @param day Day to start calendar.
* @see Invocation
**/
function DynaCalendar(nameinvocationyearmonthday) {
  
//populate day of week and month name constants if not previously created...
  
if(!DynaCalendar.MONTHS) {
    var 
MONTHS = [];
    var 
DOW = []; 
    
DynaCalendar.MONTHS MONTHS;
    
DynaCalendar.DOW DOW;
    
    var 
tmpDate = new Date(200001);
    for(var 
012i++) {
      
tmpDate.setMonth(i);
      var 
dateStr tmpDate.toLocaleString();
      var 
monthname dateStr.match(/\s[a-zA-Z]+\s/)[0];
      
monthname monthname.substring(1,monthname.length-1);
      
MONTHS[i] = monthname;
    }
    
    for(var 
18i++) {
      
tmpDate.setDate(i);
      var 
dateStr tmpDate.toLocaleString();
      var 
dow dateStr.substring(0,3);
      
DOW[tmpDate.getDay()] = dow;
    }
  }

  if(
year && month && day)
    
this.date = new Date(yearmonthday);
  else
    
this.date = new Date();
  
  
this.invocation invocation;
  
this.name name;
  
this.isOpen false;
  
this.rendered false;
  
this.bodyRendern false;
          
  
dynaCalendars[name] = this;
}

/**
* Displays the dynacalendar at the specified anchor.
* @param anchor A element to open the calendar under
*/
DynaCalendar.prototype.open = function(anchor) {
  if(!
this.rendered)
    
this.render();
  if(!
this.bodyRendern)
    
this.renderBody();
  
this.calendarDiv.style.display "block";
  
positionAtAnchor(this.calendarDivanchor"bottom""left");
  
this.isOpen true;
}

/**
* Closes the dynaCalendar
*/
DynaCalendar.prototype.close = function() {
  
this.calendarDiv.style.display "none";
  
this.isOpen false;
}

/**
* Fills the calendarDiv with actual date spans
**/
DynaCalendar.prototype.render = function() {
  var 
calendarDiv document.createElement("DIV");
  var 
calendarTable document.createElement("TABLE");
  var 
calendarHead document.createElement("THEAD");
  var 
calendarHeadTR document.createElement("TR");
  var 
calendarHeadWeekTR document.createElement("TR");
  var 
calendarBY document.createElement("TH");
  var 
calendarBM document.createElement("TH");
  var 
calendarTitle document.createElement("TH");
  var 
calendarFM document.createElement("TH");
  var 
calendarFY document.createElement("TH");
  var 
calendarBody document.createElement("TBODY");
  
  
calendarDiv.className "dynaCalendarDiv";
  
calendarTable.className "dynaCalendarTable";
  
calendarTitle.colSpan 3;
  
  
calendarBY.className "BF";
  
calendarBM.className "BF";
  
calendarFM.className "BF";
  
calendarFY.className "BF";
  
calendarBY.innerHTML "&lt;&lt;";
  
calendarBM.innerHTML "&lt;";
  
calendarFM.innerHTML "&gt;";
  
calendarFY.innerHTML "&gt;&gt;";
  
calendarBY.onclick dynaCalendarBackYearOnClick;
  
calendarBM.onclick dynaCalendarBackMonthOnClick;
  
calendarFM.onclick dynaCalendarForwardMonthOnClick;
  
calendarFY.onclick dynaCalendarForwardYearOnClick;
  
  
calendarDiv.dynaCalendar this;
  
calendarHead.dynaCalendar this;
  
calendarBody.dynaCalendar this;
  
calendarBY.dynaCalendar this;
  
calendarBM.dynaCalendar this;
  
calendarTitle.dynaCalendar this;
  
calendarFM.dynaCalendar this;
  
calendarFY.dynaCalendar this;
  
  
this.calendarTitle calendarTitle;
  
this.calendarBody calendarBody;
  
this.calendarDiv calendarDiv;
  
  
//populate week header
  
for(var 07i++) {
    var 
dowTH document.createElement("TH");
    
dowTH.innerHTML DynaCalendar.DOW[i];
    
calendarHeadWeekTR.appendChild(dowTH);
  }

  
calendarHeadTR.appendChild(calendarBY);
  
calendarHeadTR.appendChild(calendarBM);
  
calendarHeadTR.appendChild(calendarTitle);
  
calendarHeadTR.appendChild(calendarFM);
  
calendarHeadTR.appendChild(calendarFY);
  
calendarHead.appendChild(calendarHeadTR);
  
calendarHead.appendChild(calendarHeadWeekTR);
  
calendarTable.appendChild(calendarHead);
  
calendarTable.appendChild(calendarBody);
  
calendarDiv.appendChild(calendarTable);
  
document.body.appendChild(calendarDiv);
  
  
this.rendered true;
}

/**
* Renders the actual month.
**/
DynaCalendar.prototype.renderBody = function() {
  
//title 
  
var title DynaCalendar.MONTHS[this.date.getMonth()]+ " " this.date.getFullYear();
  
this.calendarTitle.innerHTML title;
  
  
//clear table body
  
while(this.calendarBody.hasChildNodes())
    
this.calendarBody.removeChild(this.calendarBody.lastChild);
  
  
//generate new table body
  
var tmpDate = new Date(this.date.getFullYear(), this.date.getMonth(), 1);

  var 
row document.createElement("TR");
  
this.calendarBody.appendChild(row);
  
  
//blanks
  
for(var 0tmpDate.getDay(); i++) {
    var 
td document.createElement("TD");
    
row.appendChild(td);
  }
  
  while(
tmpDate.getMonth() == this.date.getMonth()) {
    var 
td document.createElement("TD");
    var 
date tmpDate.getDate();
    if(
date == this.date.getDate())
      
td.className "daySelected";
    else
      
td.className "day";
    
    
td.innerHTML date;
    
td.dynaCalendar this;
    
td.onclick dynaCalendarSelectDayOnClick;
    
row.appendChild(td);
    
    if(
tmpDate.getDay() == 6) {
      
row document.createElement("TR");
      
this.calendarBody.appendChild(row);
    }
    
    
tmpDate.setDate(date 1);
  }
  
  
//blanks 
  
for(var tmpDate.getDay(); 7i++) {
    var 
td document.createElement("TD");
    
row.appendChild(td);
  }
          
  
this.bodyRendern true;
}

/**
* Set the day of the month
* @param date The date of the month to set the calandar to.
**/
DynaCalendar.prototype.setDate = function(date) {
  
this.date.setDate(date);
  
this.bodyRendern false;
}

/**
* Moves back a year
**/
DynaCalendar.prototype.backYear = function() {
  
this.setDate(1);
  
this.date.setFullYear(this.date.getFullYear() - 1);
  
this.renderBody();
}

/**
* Moves back a month
**/
DynaCalendar.prototype.backMonth = function() {
  
this.setDate(1);
  
this.date.setMonth(this.date.getMonth() - 1);
  
this.renderBody();
}

/**
* Moves forward a month
**/
DynaCalendar.prototype.forwardMonth = function() {
  
this.setDate(1);
  
this.date.setMonth(this.date.getMonth() + 1);
  
this.renderBody();
}

/**
* Moves forward a year
**/
DynaCalendar.prototype.forwardYear = function() {
  
this.setDate(1);
  
this.date.setFullYear(this.date.getFullYear() + 1);
  
this.renderBody();
}

// Event handlers -------------------------------------------------------------
/**
* onclick to select a day
*/
function dynaCalendarSelectDayOnClick(event) {
  
//IE
  
if(window.event) {
    var 
srcElement window.event.srcElement;
  }
  
//MOZ
  
else {
    var 
srcElement event.currentTarget;
  }
  
  var 
calendar srcElement.dynaCalendar;
  
calendar.setDate(srcElement.innerHTML);
  if(
calendar.invocation)
    
calendar.invocation.invoke([calendar.date]);
  
srcElement.dynaCalendar.close();

  return 
false;
}

/**
* onclick to go back one year
*/
function dynaCalendarBackYearOnClick(event) {
  
//IE
  
if(window.event) {
    var 
srcElement window.event.srcElement;
  }
  
//MOZ
  
else {
    var 
srcElement event.currentTarget;
  }

  
srcElement.dynaCalendar.backYear();
  return 
false;
}

/**
* onclick to go back one month
*/
function dynaCalendarBackMonthOnClick(event) {
  
//IE
  
if(window.event) {
    var 
srcElement window.event.srcElement;
  }
  
//MOZ
  
else {
    var 
srcElement event.currentTarget;
  }

  
srcElement.dynaCalendar.backMonth();
  return 
false;
}

/**
* onclick to go forward one month
*/
function dynaCalendarForwardMonthOnClick(event) {
  
//IE
  
if(window.event) {
    var 
srcElement window.event.srcElement;
  }
  
//MOZ
  
else {
    var 
srcElement event.currentTarget;
  }

  
srcElement.dynaCalendar.forwardMonth();
  return 
false;
}

/**
* onclick to go forward one year
*/
function dynaCalendarForwardYearOnClick(event) {
  
//IE
  
if(window.event) {
    var 
srcElement window.event.srcElement;
  }
  
//MOZ
  
else {
    var 
srcElement event.currentTarget;
  }

  
srcElement.dynaCalendar.forwardYear();
  return 
false;
}

// ===================================

function setup_cal() {
  var 
cal = new DynaCalendar("test",new Invocation(this,"change_link"));
}

function 
change_link(date) {
  
document.getElementById("link1").innerHTML date.toLocaleString();
}

// =================================

window.onload setup_cal();

//-->
</script>

</HEAD>

<BODY BGCOLOR=#ffffff vlink=#0000ff >


<BR>
<center>

<table cellpadding=10 cellspacing=0 border=0 width="100%">
   <tr><td align=center>

<center>

&gt;&gt;<br>
</center>

   </tr>
</table>

<BR>
<BR>


<basefont size=3>
<BR>
<BR>
<!-- Demonstration -->
<div align="center">
<a id="link1" class="myText" onClick="openDynaCalendar('test',this);">Click to Open Calendar</a>
<input name="ken" type="text" class="myText" id="link1" onClick="openDynaCalendar('test',this);">
</div>

<P>

<P>


</tr>
</table>




</body></html> 

THANKS!!