Thread: datepicker calendar uses javascript and php
View Single Post
  #1  
Old 07-20-2005, 05:10 AM
 
maineiac maineiac is offline
 

Member
   
Join Date: Jun 2005
Location: USA
Posts: 29
 
Default datepicker calendar uses javascript and php
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">[&lt;]</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">[&gt;]</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">[&lt;]</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">[&gt;]</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!
__________________
maineiac

x-cart gold v4.0.18
x-cart gold v4.1.8
Reply With Quote