On the checkout page I have successfully replaced the original 'Customer Notes' and added a new field there by following cherie's excellent directions in this post:
http://forum.x-cart.com/viewtopic.php?t=9400&postdays=0&postorder=asc&high light=change%20order%20details&start=15 Now I would like to add a datepicker - a small popup calendar to pick a date - that will enter the chosen date into a text field (my new field). The original script consists of 3 php files as follows:
main.php
Code:
<html>
<head>
<title>Example of Datepicker</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#eeeeee" text="#000000"><Script Language="JavaScript">
function showCalendar(frm,textbox){
window.open("Calendar.php?frm=" + frm + "&txt=" + textbox,"DatePicker","width=250,height=230,status=no,resizable=no,top=200,left=200");
}
function getObject(obj){
alert(obj.value);
}
</Script>
<form name="frm">
<input type="text" name="txtCalendar">
<button type="button" onclick="showCalendar('frm','txtCalendar')">Click for Date</button>
</form>
</body>
</html>
Calendar.php
Code:
<?php
include 'DatePicker.php';
//Get form and textbox from calling paging
$frm = $_GET['frm'];
$txt = $_GET['txt'];
?>
<html>
<head>
<title><< Delivery Date Calendar >></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<Script Language="JavaScript">
function getSelDate(SelDate){
var frm,txt;
frm = '<?php print "$frm" ?>';
txt = '<?php print "$txt" ?>';
window.opener.document.forms[frm].elements[txt].value = SelDate;
window.close();
}
</Script>
</head>
<body bgcolor="#999999" text="#000000">
<div align="center">
<table width="40%" border="0" bgcolor=#DCF3FC>
<tr bgcolor=#DCF3FC>
<td>
<?php $prevYear = $intYear - 1;
print "<a href=Calendar.php?prevYear=$prevYear&prevMonth=$intMonth&frm=$frm&txt=$txt>";
?>
<div align="right">[<]</div>
</a>
</td>
<td>
<div align="center"><?php print"
$intYear"; ?></div>
</td>
<td>
<?php $nextYear = $intYear + 1;
print "<a href=Calendar.php?nextYear=$nextYear&prevMonth=$intMonth&frm=$frm&txt=$txt>";
?>
<div align="left">[>]</div>
</a>
</td>
</tr>
</table>
</div>
<div align="center">
<table width="40%" border="0" bgcolor=#DCF3FC>
<tr>
<td>
<?php
$prevMonth = $intMonth - 1;
if ($prevMonth % 12 == 0){
$prevMonth = 12;
$intYear = $intYear - 1;
}
print "<a href=Calendar.php?prevMonth=$prevMonth&curYear=$intYear&frm=$frm&txt=$txt>";
?>
<div align="right">[<]</div>
</a>
</td>
<td>
<div align="center"><?php print"
$strLongMonth" ?></div>
</td>
<td>
<?php
$nextMonth = $intMonth + 1;
if ($nextMonth % 13 == 0){
$nextMonth = 1;
$intYear = $intYear + 1;
}
print "<a href=Calendar.php?nextMonth=$nextMonth&curYear=$intYear&frm=$frm&txt=$txt>";
?>
<div align="left">[>]</div>
</a>
</td>
</tr>
</table>
</div>
<div align="center">
<table width="40%" border="0" bgcolor=ffffff>
<tr bgcolor=#FFFFD2>
<td>
<div align="center">
Sun</div>
</td>
<td>
<div align="center">
Mon</div>
</td>
<td>
<div align="center">
Tue</div>
</td>
<td>
<div align="center">
Wed</div>
</td>
<td>
<div align="center">[b]Thu</a></div>
</td>
<td>
<div align="center">
Fri</div>
</td>
<td>
<div align="center">
Sat</div>
</td>
</tr>
<?php
for($i=0;$i<6;$i++){
?>
<tr>
<?php
for($j=0;$j<7;$j++){
?>
<?php if($j==6){
print "<td bgcolor=#FFFF00>";
}elseif ($j==0 || $j==1) {print "<td bgcolor=#999999>";}
else{
print "<td bgcolor=#FFFFD2>";
}
?>
<?php
if($intAllDays >= $intStartDayOfMonth && $intDays <= $intDayInMonth){
$intMonth = $intMonth - 0;
$selDate = FormatDate($intMonth,$intDays,$intYear,"MM/DD/YYYY");
?>
<div align="center">
<?php if($j==6){
print"
<font color=red>$intDays</font>";
}else{
if($selDate == $Today){
print"
<font color=blue>$intDays</font>";
}else{
print"
$intDays";
}
}
?>
</div>
<?php
$intDays = $intDays + 1;
}
?>
</td>
<?php
$intAllDays = $intAllDays + 1;
}
?>
</tr>
<?php
}
?>
</table>
</div>
</body>
</html>
DatePicker.php
Code:
<?php
//Class Kalendar
class Kalendar {
var $Year;
var $defaultYear;
var $LeapYear;
var $Month;
var $DefaultMonth;
var $DayCount;
var $FirstDayOfMonth;
var $LongMonth;
var $FormatDate;
function Kalendar(){
$defaultYear = date("Y");
$DefaultMonth = date("m");
$this->Year=$defaultYear;
$this->Month=$DefaultMonth;
}
//Year
function setYear($intNewYear){
$this->Year = $intNewYear;
}
function getYear(){
return $this->Year;
}
//Leap Year - Return true or 1 is Leap Year
function getLeapYear(){
$intBaki = $this->Year % 4;
if($intBaki == 0){
return 1;
}else{
return 0;
}
}
//Month
function setMonth($intMonth){
$this->Month=$intMonth;
}
function getMonth(){
return $this->Month;
}
//Count how many days in a month
function getDaysInMonth(){
switch($this->getMonth()){
case 1:
$this->DayCount = 31;
break;
case 2:
if($this->getLeapYear() == 0){
$this->DayCount = 28;
}else{
$this->DayCount = 29;
}
break;
case 3:
$this->DayCount = 31;
break;
case 4:
$this->DayCount = 30;
break;
case 5:
$this->DayCount = 31;
break;
case 6:
$this->DayCount = 30;
break;
case 7:
$this->DayCount = 31;
break;
case 8:
$this->DayCount = 31;
break;
case 9:
$this->DayCount = 30;
break;
case 10:
$this->DayCount = 31;
break;
case 11:
$this->DayCount = 30;
break;
case 12:
$this->DayCount = 31;
break;
}
return $this->DayCount;
}
//Function to get the first day of the month
function getFirstDayOfMonth(){
$strDate = date("w", mktime(0,0,0,$this->Month,1,$this->Year));
return $this->FirstDayOfMonth=$strDate;
}
function getLongMonth(){
switch($this->getMonth()){
case 1:
return $this->LongMonth="JANUARY";
break;
case 2:
return $this->LongMonth="FEBRUARY";
break;
case 3:
return $this->LongMonth="MARCH";
break;
case 4:
return $this->LongMonth="APRIL";
break;
case 5:
return $this->LongMonth="MAY";
break;
case 6:
return $this->LongMonth="JUNE";
break;
case 7:
return $this->LongMonth="JULY";
break;
case 8:
return $this->LongMonth="AUGUST";
break;
case 9:
return $this->LongMonth="SEPTEMBER";
break;
case 10:
return $this->LongMonth="OCTOBER";
break;
case 11:
return $this->LongMonth="NOVEMBER";
break;
case 12:
return $this->LongMonth="DECEMBER";
break;
}
}
}
//Function Format Date
function FormatDate($intMM,$intDD,$intYY,$strFormat){
switch ($strFormat){
case "MM/DD/YYYY" :
if($intMM < 10){
$intMM = "0$intMM";
}
if($intDD < 10){
$intDD = "0$intDD";
}
$dtmDate = "$intMM/$intDD/$intYY";
return $this->FormatDate=$dtmDate;
break;
case "MM.DD.YYYY" :
if($intMM < 10){
$intMM = "0$intMM";
}
if($intDD < 10){
$intDD = "0$intDD";
}
$dtmDate = "$intMM.$intDD.$intYY";
return $this->FormatDate=$dtmDate;
break;
}
}
//Main()
//Create object Calendar
$objKalendar = new Kalendar();
if (!empty($_GET['prevYear'])){
$objKalendar->setYear($_GET['prevYear']);//Set current year to prev year
}elseif (!empty($_GET['nextYear'])){
$objKalendar->setYear($_GET['nextYear']);//Set current year to next year
}elseif(!empty($_GET['curYear'])){
$objKalendar->setYear(($_GET['curYear']));
}else{
$objKalendar->setYear(date("Y"));//Set default year
}
if(!empty($_GET['prevMonth'])){
$objKalendar->setMonth(($_GET['prevMonth']));//Set current month to prev month
}elseif(!empty($_GET['nextMonth'])){
$objKalendar->setMonth(($_GET['nextMonth']));//Set current month to next month
}else{
$objKalendar->setMonth(date("m")); //Set default month
}
//Variables for calendar
$intDays = 1; //Start to end day of the month
$intAllDays = 0; //All days (35 days)
$intDayInMonth = $objKalendar->getDaysInMonth();//Get days in month (28-31)
$intStartDayOfMonth = $objKalendar->getFirstDayOfMonth();//Get start day of the month (0-6)
$intYear = $objKalendar->getYear();//Get year
$strLongMonth = $objKalendar->getLongMonth();//Get Long Month eg: September
$intMonth = $objKalendar->getMonth();
//$gdtmDate = $objKalendar->getFormatDate(2,1,2002,"DD/MM/YYYY");
//print "Format date : $gdtmDate";
$m=date("m")-0;
$d=date("d")-0;
$y=date("Y");
$Today = FormatDate($m,$d,$y,'MM/DD/YYYY');
?>
This all works great when all pages are in the same directory. Now to make it work with my XCART!!! So... I have added the following to skin1/customer/main/checkout_notes.tpl:
Code:
<TR valign="top">
<TD>{$lng.lbl_delivery_date}:</TD>
<TD></TD>
<TD nowrap>
{include file="datepicker/datepicker_js.tpl"}
<form name="frm">
<input type="text" name="txtCalendar">
<button type="button" onclick="showCalendar('frm','txtCalendar')">Click for Date</button>
</form>
</TD>
</TR>
have added the folder skin1/datepicker and the template file skin1/datepicker/datepicker_js.tpl as follows:
Code:
{literal}
<Script Language="JavaScript">
function showCalendar(frm,textbox){
window.open("datepicker/Calendar.php?frm=" + frm + "&txt=" + textbox,"DatePicker","width=250,height=230,status=no,resizable=no,top=200,left=200");
}
function getObject(obj){
alert(obj.value);
}
</Script>
{/literal}
and added the folder xcart/datepicker with the two files Calendar.php and DatePicker.php in this folder.
So now on the checkout page there's a text box and a "Click for Date" button. Onclick a calendar window pops up. Good so far! When I click a date on the calendar I get a javascript error:
Code:
Error: window.opener.document.forms[frm] has no properties
Source File: http://mywebsite.com/xcart/datepicker/Calendar.php?frm=frm&txt=txtCalendar
Line: 11
Any ideas on how to make this work? Many thanks in advance for your help!
FAQ
07-20-2005, 05:10 AM
datepicker calendar uses javascript and php
