Hello!
I recently tried to implement a date picker within "checkout_notes.tpl". It works perfectly in html but apparently not within tpl. Do I make a very obvious mistake? Attached is the file. Thank you for any hint!! ~Jahn
{* $Id: checkout_notes.tpl,v 1.6 2005/12/07 14:07:21 max Exp $ *}
{include file="customer/main/subheader.tpl" title=$lng.txt_notes class="grey"}
<head>
<link rel="stylesheet" href="{$SkinDir}/cal-2/demos.css" media="screen" type="text/css">
<script type="text/javascript" src="{$SkinDir}/cal-2/dhtmlSuite-common.js"></script>
<script language="javascript" type="text/javascript" src="{$SkinDir}/cal-2/dhtmlSuite-calendar.js"></script>
<script language="javascript" type="text/javascript" src="{$SkinDir}/cal-2/dhtmlSuite-dragDropSimple.js"></script>
<link type="text/css" media="screen" rel="stylesheet" href="{$SkinDir}/cal-2/calendar.css">
</head>
<body>
<!-- A DATE PICKER FOR FORMS -->
{literal}
<script type="text/javascript">
var calendarObjForForm = new DHTMLSuite.calendar({minuteDropDownInterval:10,num berOfRowsInHourDropDown:5,callbackFunctionOnDayCli ck:'getDateFromCalendar',isDragable:true,displayTi meBar:true});
calendarObjForForm.setCallbackFunctionOnClose('myO therFunction');
function myOtherFunction()
{
}
function pickDate(buttonObj,inputObject)
{
calendarObjForForm.setCalendarPositionByHTMLElemen t(inputObject,0,inputObject.offsetHeight+2); // Position the calendar right below the form input
calendarObjForForm.setInitialDateFromInput(inputOb ject,'yyyy-mm-dd hh:ii'); // Specify that the calendar should set it's initial date from the value of the input field.
calendarObjForForm.addHtmlElementReference('myDate ',inputObject); // Adding a reference to this element so that I can pick it up in the getDateFromCalendar below(myInput is a unique key)
if(calendarObjForForm.isVisible()){
calendarObjForForm.hide();
}else{
calendarObjForForm.resetViewDisplayedMonth(); // This line resets the view back to the inital display, i.e. it displays the inital month and not the month it displayed the last time it was open.
calendarObjForForm.display();
}
}
/* inputArray is an associative array with the properties
year
month
day
hour
minute
calendarRef - Reference to the DHTMLSuite.calendar object.
*/
function getDateFromCalendar(inputArray)
{
var references = calendarObjForForm.getHtmlElementReferences(); // Get back reference to form field.
references.myDate.value = inputArray.year + '-' + inputArray.month + '-' + inputArray.day + ' ' + inputArray.hour + ':' + inputArray.minute;
calendarObjForForm.hide();
}
</script>{/literal}
<form name="myForm">
<table cellspacing="0" cellpadding="2">
<tr valign="top">
<td>{$lng.lbl_customer_notes}:</td>
<td> </td>
<td nowrap="nowrap"><textarea cols="70" rows="3" name="Customer_Notes" value="2007-12-24 12:00" onclick="" ></textarea></td>
<td><input value="Pick-up date/time" onclick="pickDate(this,document.forms[0].myDate);" type="button"></td>
</tr>
</table></form>
</body>