|
-
Apr 21st, 2006, 03:04 AM
#2
Thread Starter
<?="Moderator"?>
Re: [PHP + AJAX] Date Select
Ok i have made some changes so that this script will be useful. It now allows instances to be used on a single page.
Heres the new script
PHP Code:
<?php
/****************************************************
Creator: John Tindell
Email: linal[_AT_]mindlessant.co.uk
Version: 1.1
Last-Update: 21st April 2006
****************************************************/
if(isset($_GET['script']))
{
?>
function createRequestObject_<?=$_GET['name']?>()
{
var request_o; //declare the variable to hold the object.
var browser = navigator.appName; //find the browser name
if(browser == "Microsoft Internet Explorer"){
/* Create the object using MSIE's method */
request_o = new ActiveXObject("Microsoft.XMLHTTP");
}else{
/* Create the object using other browser's method */
request_o = new XMLHttpRequest();
}
return request_o; //return the object
}
var http_<?=$_GET['name']?> = createRequestObject_<?=$_GET['name']?>();
/* Function called to handle the list that was returned from the internal_request.php file.. */
function handleCalender_<?=$_GET['name']?>(){
/* Make sure that the transaction has finished. The XMLHttpRequest object
has a property called readyState with several states:
0: Uninitialized
1: Loading
2: Loaded
3: Interactive
4: Finished */
try
{
if(http_<?=$_GET['name']?>.readyState == 4){ //Finished loading the response
/* We have got the response from the server-side script,
let's see just what it was. using the responseText property of
the XMLHttpRequest object. */
var response = http_<?=$_GET['name']?>.responseText;
//alert(response);
//document.write(response);
document.getElementById("calenderSelect_<?=$_GET['name']?>").innerHTML = response;
}
}
catch(Exception)
{
}
}
/* Function called to get the product categories list */
function init_<?=$_GET['name']?>()
{
try
{
http_<?=$_GET['name']?>.open('get', 'dateselect.php?name=<?=$_GET['name']?>');
http_<?=$_GET['name']?>.onreadystatechange = handleCalender_<?=$_GET['name']?>;
http_<?=$_GET['name']?>.send(null);
showCalender_<?=$_GET['name']?>();
}
catch(Exception)
{
http_<?=$_GET['name']?> = createRequestObject_<?=$_GET['name']?>();
}
}
function getCalender_<?=$_GET['name']?>(month,year)
{
try
{
http_<?=$_GET['name']?>.open('get', 'dateselect.php?name=<?=$_GET['name']?>&month=' + month + '&year=' + year);
http_<?=$_GET['name']?>.onreadystatechange = handleCalender_<?=$_GET['name']?>;
http_<?=$_GET['name']?>.send(null);
}
catch(Exception)
{
http_<?=$_GET['name']?> = createRequestObject_<?=$_GET['name']?>();
getCalender_<?=$_GET['name']?>(month,year);
}
}
function showCalender_<?=$_GET['name']?>()
{
document.getElementById('calenderSelect_<?=$_GET['name']?>').style.display = 'block';
}
function hideCalender_<?=$_GET['name']?>()
{
document.getElementById('calenderSelect_<?=$_GET['name']?>').style.display = 'none';
}
document.write('<div id="calender_<?=$_GET['name']?>"><a href="javascript:init_<?=$_GET['name']?>();">Select a Date</a></div>');
document.write('<div style="display:none;position:absolute;" id="calenderSelect_<?=$_GET['name']?>"></div>');
<?
}
else
{
if(isset($_GET['month']))
{
$month = $_GET['month'];
}
else
{
$month = date("m");
}
if(isset($_GET['year']))
{
$year = $_GET['year'];
}
else
{
$year = date("Y");
}
$t = strtotime("j");
//die( date("j") );
$t = date("j");
$days = date("t",mktime(1,1,1,$month,$t,$year));
$currentMonth = date("M",mktime(1,1,1,$month,1,$year));
$m_prevMonth = $m_nextMonth = $month;
$iprevYear = $inextYear = $year;
if((($m_prevMonth + 1) % 12 ) == 2)
{
$m_prevMonth = 12;
$iprevYear--;
}
else
{
$m_prevMonth--;
}
if((($m_nextMonth + 1) % 12 ) == 1)
{
$m_nextMonth = 1;
$inextYear++;
}
else
{
$m_nextMonth++;
}
$prevMonth = date("M",mktime(1,1,1,$m_prevMonth,1,$year));
$nextMonth = date("M",mktime(1,1,1,$m_nextMonth,1,$year));
$iprevMonth = date("m",mktime(1,1,1,$m_prevMonth,1,$year));
$inextMonth = date("m",mktime(1,1,1,$m_nextMonth,1,$year));
$leep_prevYear = $year - 1;
$leep_nextYear = $year + 1;
?>
<table class="calender_<?=$_GET['name']?>">
<tr>
<th colspan="7">
<a href="javascript: getCalender_<?=$_GET['name']?>('<?=$month?>','<?=$leep_prevYear?>');"><?=$leep_prevYear?></a>
<?=$year?>
<a href="javascript: getCalender_<?=$_GET['name']?>('<?=$month?>','<?=$leep_nextYear?>');"><?=$leep_nextYear?></a>
<a href="javascript: hideCalender_<?=$_GET['name']?>();">Close</a>
</th>
</tr>
<tr>
<td colspan="7"><a href="javascript: getCalender_<?=$_GET['name']?>('<?=$iprevMonth?>','<?=$iprevYear?>');"><?=$prevMonth?></a> <?=$currentMonth?> <a href="javascript: getCalender_<?=$_GET['name']?>('<?=$inextMonth?>','<?=$inextYear?>');"><?=$nextMonth?></a></td>
</tr>
<th>mon</th><th>tue</th><th>wed</th><th>thurs</th><th>fri</th><th>sat</th><th>sun</th>
</tr><tr>
<?php
$firstRow = true;
$weekPos = 1;
for($i = 1; $i <= $days; $i++)
{
if($firstRow)
{
$temp = date("N",mktime(1,1,1,$month,$i,$year));
for($x = 1; $x < $temp;$x++)
{
?>
<td> </td>
<?
}
if( date("j") == $i)
{
?>
<td><b><a href="javascript:selectDate_<?=$_GET['name']?>(<?=$i?>,<?=$month?>,<?=$year?>);hideCalender_<?=$_GET['name']?>();"><?=$i?></a></b></td>
<?
}
else
{
?>
<td><a href="javascript:selectDate_<?=$_GET['name']?>(<?=$i?>,<?=$month?>,<?=$year?>);hideCalender_<?=$_GET['name']?>();"><?=$i?></a></td>
<?
}
$weekPos += $temp;
$firstRow = false;
}
else
{
if( date("j") == $i)
{
?>
<td><b><a href="javascript:selectDate_<?=$_GET['name']?>(<?=$i?>,<?=$month?>,<?=$year?>);hideCalender_<?=$_GET['name']?>();"><?=$i?></a></b></td>
<?
}
else
{
?>
<td><a href="javascript:selectDate_<?=$_GET['name']?>(<?=$i?>,<?=$month?>,<?=$year?>);hideCalender_<?=$_GET['name']?>();"><?=$i?></a></td>
<?
}
}
if( ($weekPos % 7) == 1)
{
?>
</tr><tr>
<?
}
$weekPos++;
}
while(($weekPos % 7) != 2)
{
?>
<td> </td>
<?
$weekPos++;
}
?>
</tr>
</table>
<?
}
?>
Heres the news example of how to use it
Code:
<html>
<head>
<style>
#calenderSelect_one
{
background: #000000;
}
.calender_one td
{
width: 25px;
height: 25px;
background: #CFCFCF;
text-align: center;
}
.calender_one th
{
width: 25px;
height: 25px;
background: #B3B3B3;
}
#calenderSelect_two
{
background: #000000;
}
.calender_two td
{
width: 25px;
height: 25px;
background: #CFCFCF;
text-align: center;
}
.calender_two th
{
width: 25px;
height: 25px;
background: #B3B3B3;
}
</style>
</head>
<body>
<script>
function selectDate_one(day,month,year)
{
document.getElementById("calender_one").innerHTML = day + ' - ' + month + ' - ' + year + ' ' + '<a href="javascript:init_one();">Select a Date</a>';
}
</script>
<script src="dateselect.php?script=true&name=one"></script>
<script>
function selectDate_two(day,month,year)
{
document.getElementById("calender_two").innerHTML = day + ' - ' + month + ' - ' + year + ' ' + '<a href="javascript:init_two();">Select a Date</a>';
}
</script>
<script src="dateselect.php?script=true&name=two"></script>
</body>
</html>
The name of the object is dependable on the src values in the <script> tags.
Enjoy
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|
Reply With Quote