[PHP + AJAX] Date Select [Archive]

john tindell

Apr 8th, 2006, 12:06 PM

Here is a script that will let the user select a date. Its written in PHP and uses AJAX. There is one PHP file which does all the work. You need to write a call back function so that you can handle the date how ever you want to, eg if you need it for a form, stick it in a textbox.

This is what the date selector looks like
http://www.vbforums.com/attachment.php?attachmentid=46742&stc=1

It is only a quick test to see if i could make a working solution so there could be some bugs in it.

Ok here comes the code

<?php

if(isset($_GET['script']))
{
?>
function createRequestObject()
{
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
}
/* Function called to handle the list that was returned from the internal_request.php file.. */
function handleCalender(){
/* 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.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.responseText;
//alert(response);
//document.write(response);
document.getElementById("calender").innerHTML = response;
}
}
catch(Exception)
{
}

}

/* Function called to get the product categories list */
var http = createRequestObject();
function init()
{
http.open('get', 'dateselect.php');
http.onreadystatechange = handleCalender;
http.send(null);
}
function getCalender(month,year)
{
try
{
http.open('get', 'dateselect.php?month=' + month + '&year=' + year);
http.onreadystatechange = handleCalender;
http.send(null);
}
catch(Exception)
{
http = createRequestObject();
alert('error');
}
}
document.write('<div id="calender"><a href="javascript:init();">Select a Date</a></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;

?>
<style>
td
{
width: 25px;
height: 25px;
background: #CFCFCF;
text-align: center;
}
th
{
width: 25px;
height: 25px;
background: #B3B3B3;
}
</style>
<table>
<tr>
<th colspan="7">
<a href="javascript: getCalender('<?=$month?>','<?=$leep_prevYear?>');"><?=$leep_prevYear?></a>
<?=$year?>
<a href="javascript: getCalender('<?=$month?>','<?=$leep_nextYear?>');"><?=$leep_nextYear?></a>
</th>
</tr>
<tr>
<td colspan="7"><a href="javascript: getCalender('<?=$iprevMonth?>','<?=$iprevYear?>');"><?=$prevMonth?></a> <?=$currentMonth?> <a href="javascript: getCalender('<?=$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++)
{
print "<td> </td>";
}
if( date("j") == $i)
{
?>
<td><b><a href="javascript:selectDate(<?=$i?>,<?=$month?>,<?=$year?>);"><?=$i?></a></b></td>
<?
}
else
{
?>
<td><a href="javascript:selectDate(<?=$i?>,<?=$month?>,<?=$year?>);"><?=$i?></a></td>
<?
}
$weekPos += $temp;
$firstRow = false;
}
else
{
if( date("j") == $i)
{
?>
<td><b><a href="javascript:selectDate(<?=$i?>,<?=$month?>,<?=$year?>);"><?=$i?></a></b></td>
<?
}
else
{
?>
<td><a href="javascript:selectDate(<?=$i?>,<?=$month?>,<?=$year?>);"><?=$i?></a></td>
<?
}
}
if( ($weekPos % 7) == 1)
{
print "</tr><tr>";
}
$weekPos++;
}
while(($weekPos % 7) != 2)
{
print "<td> </td>";
$weekPos++;
}
?>
</tr>
</table>
<?
}
?>

Now this is how you use it.

<html>
<head>

</head>
<body>
<script>
//this is the callback function that processes the selected date
function selectDate(day,month,year)
{
//there is a layer called "calender" which holds the date selector
document.getElementById("calender").innerHTML = day + '/' + month + '/' + year + ' ' + '<a href="javascript:init();">Select a Date</a>';
}
</script>
<script src="dateselect.php?script"></script>
</body>
</html>

john tindell

Apr 21st, 2006, 04:04 AM

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
/****************************************************
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

<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