I just finished making MY version of a date picker calendar. This one uses XMLHTTP (AJAX) to get PHP to generate the calendar. The visual part itself is thrown into the page, so there are no pop-ups. This uses DOM scripting and xmlhttp, so it's not backwards compatible with Netscape 2. Sorry.
Changing the appearance isn't ideally simple, but I didn't want to require modifications to a site's CSS file in order to change the appearance. So, everything's done with <style> tags and onMouseOver and onMouseOut. To change the appearance, just modify the $styles array at the top of the file.
$styles['current']['day'] defines the styles that are applied to the current month's weekdays,
$styles['current']['weekend'] defines the styles that are applied to the current month's weekend days
$styles['other']['day'] defines the styles that are applied to previous & last month's weekdays,
$styles['other']['weekend'] defines the styles that are applied to previous & last month's weekends days.
$styles['nav'] defines the styles applied to the 'next' and 'previous' links
$styles['date'] defines the styles applied to the date output in the header
$styles['th'] defines the styles applied to the whole header
$styles['td'] defines the styles applied to the calendar days
$styles['a'] defines the styles applied to the links in each day
'js' defines the string javascript will use to change this property
'css' defines the string that will be used in the <style> tags
'value' defines the initial and onMouseOut value of this property
'mouseovervalue' defines the value of this property defined onmouseover
Library
Code: Select all
<?PHP
//Released under the GPL license
//--------------------
// CONFIG
//set the styles of the calendar
$styles['current']['day'] = array(array('js'=>'backgroundColor',
'css'=>'background-color',
'mouseovervalue'=>'#FFFFFF',
'value'=>'#d7e9ff'));
$styles['current']['weekend'] = array(array('js'=>'backgroundColor',
'css'=>'background-color',
'mouseovervalue'=>'#FFFFFF',
'value'=>'#a7cbf5'));
$styles['other']['day'] = array(array('js'=>'backgroundColor',
'css'=>'background-color',
'mouseovervalue'=>'#FFFFFF',
'value'=>'#afc3d9'));
$styles['other']['weekend'] = array(array('js'=>'backgroundColor',
'css'=>'background-color',
'mouseovervalue'=>'#FFFFFF',
'value'=>'#d9e0e7'));
$styles['nav'] = array(array('js'=>'backgroundColor',
'css'=>'background-color',
'mouseovervalue'=>'#FFFFFF',
'value'=>'#5995de'),
array('js'=>'color',
'css'=>'color',
'mouseovervalue'=>'#333333',
'value'=>'#FFFFFF'),
array('js'=>'display',
'css'=>'display',
'mouseovervalue'=>'block',
'value'=>'block'),
array('js'=>'textDecoration',
'css'=>'text-decoration',
'mouseovervalue'=>'none',
'value'=>'none'));
$styles['th'] = 'background-color:#5995de;color:#fff;font-weight:bold;';
$styles['date'] = 'text-align:center;';
$styles['td'] = 'text-align:center;';
$styles['a'] = 'display:block;height:100%;text-decoration:none;padding:3px;';
//set the date format to return - use PHP's date() syntax
$date_format = 'd/m/Y';
// /CONFIG
// You shouldn't need to go beyond this point
//--------------------
if($_POST['mode'] == 'PHP')
{
actAsPHP($styles,$date_format);
}
else
{
actAsJavascript();
}
function actAsPHP($styles,$date_format)
{
$id = $_POST['id'];
if(isset($_POST['curr_stamp']))
{
$direction = ($_POST['direction'] == 'subtract') ? '-' : '+';
$now = strtotime($direction.'1 month',$_POST['curr_stamp']);
}
else
{
$now = time();
}
$first_of_month = mktime(0,0,0,date('m',$now),1,date('y',$now));
//-------------------
//build the day array
//get the Monday of the week that has the 1st of the month
$first_day_stamp = $first_of_month;
while(date('w',$first_day_stamp) > 0)
{
$first_day_stamp = strtotime('-1 day',$first_day_stamp);
}
//insert all days from last month
$curr_stamp = $first_day_stamp;
while($curr_stamp < $first_of_month)
{
$days[1][] = $curr_stamp;
$curr_stamp = strtotime('+1 day',$curr_stamp);
}
//insert all days from this month
$week = 1;
while(date('n',$curr_stamp) == date('n',$first_of_month))
{
$days[$week][] = $curr_stamp;
$week = (date('w',$curr_stamp)) == 6 ? $week + 1 : $week;
$curr_stamp = strtotime('+1 day',$curr_stamp);
}
//insert all the days from next month
while(date('w',$curr_stamp) > 0)
{
$days[$week][] = $curr_stamp;
$curr_stamp = strtotime('+1 day',$curr_stamp);
}
//-----------------
//display the table
//open the table & display the navigation
foreach($styles['nav'] as $property)
{
$style .= $property['css'].':'.$property['value'].';';
$mouseOver .= 'this.style.'.$property['js']."='".$property['mouseovervalue']."';";
$mouseOut .= 'this.style.'.$property['js']."='".$property['value']."';";
}
$monthyear = date('M \'y',$first_of_month);
echo <<<TABLE
<table cellspacing = '1' style = '$styles[table]'>
<tr>
<th style = '$styles[th]' colspan = '2'>
<a href = "javascript:void(0);" style = "$style" onmouseover = "$mouseOver" onmouseout = "$mouseOut" onClick = "loadDate('$id','$first_of_month','subtract');">
«
</a>
</th>
<th colspan = '3' style = '$styles[th] $styles[date]'>
$monthyear
</th>
<th style = '$styles[th]' colspan = '2'>
<a href = "javascript:void(0);" style = "$style" onmouseover = "$mouseOver" onmouseout = "$mouseOut" onClick = "loadDate('$id','$first_of_month','add');">
»
</a>
</th>
</tr>
TABLE;
foreach($days as $week)
{
echo '<tr>';
foreach($week as $day)
{
//setup how the day should look
if(date('n',$day) != date('n',$first_of_month))
if(date('w',$day) == 0 || date('w',$day) == 6)
$style_properties = $styles['other']['weekend'];
else
$style_properties = $styles['other']['day'];
else
if(date('w',$day) == 0 || date('w',$day) == 6)
$style_properties = $styles['current']['weekend'];
else
$style_properties = $styles['current']['day'];
unset($style);
unset($mouseOver);
unset($mouseOut);
foreach($style_properties as $property)
{
$style .= $property['css'].':'.$property['value'].';';
$mouseOver .= 'this.style.'.$property['js']." = '".$property['mouseovervalue']."';";
$mouseOut .= 'this.style.'.$property['js']." = '".$property['value']."';";
}
$day_of_month = date('j',$day);
$click_val = date($date_format,$day);
echo <<<CELL
<td style = '$styles[td]'>
<a href = "javascript:void(0);"
style = '$styles[a] $style'
onMouseOver = "$mouseOver"
onMouseOut = "$mouseOut"
onClick = "document.getElementById('$id').value = '$click_val';document.getElementById('$id').style.display = 'block';document.getElementById('$id').focus();divNode = document.getElementById('calendar');divNode.parentNode.removeChild(divNode);">$day_of_month
</a>
</td>
CELL;
}
echo '</tr>';
}
echo '</table>';
}//function: actAsPHP()
function actAsJavascript()
{
$uri = 'http://'.$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
header('Content-type: text/javascript;');
echo <<<JAVASCRIPT
function loadDate(pFieldID)
{
try
{
if(window.XMLHttpRequest)
{
reqsend = new XMLHttpRequest();
}
else
{
reqsend = new ActiveXObject("Microsoft.XMLHTTP");
}
}
catch(e)
{
alert('Your browser does not support XMLHTTP.');
}
try
{
reqsend.open("POST",'$uri');
reqsend.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
post = "mode=PHP&id=" + pFieldID;
//'arguments' is a JS construct that represents
//all the arguments sent to a function
if(arguments[1])
{
post = post + '&curr_stamp=' + arguments[1] + '&direction=' + arguments[2];
}
reqsend.setRequestHeader("Content-Length",post.length);
reqsend.send(post);
reqsend.onreadystatechange = function()
{
if(reqsend.readyState == 4 && reqsend.status == 200)
{
var responseText = reqsend.responseText;
//create the new div
//it's not inserted into the document yet
calendarDiv = document.createElement('div');
calendarDiv.setAttribute('id','calendar');
//remove the div if it exists
//this avoids duplication of the calendar in the document
if(document.getElementById('calendar'))
{
calendarDiv = document.getElementById('calendar');
calendarDiv.parentNode.removeChild(calendarDiv);
}
//insert the new div into the document
pField = document.getElementById(pFieldID);
pField.parentNode.appendChild(calendarDiv);
//hide the text field it's replacing
document.getElementById(pFieldID).style.display = 'none';
//fill the new div
document.getElementById('calendar').innerHTML = responseText;
}
};
}
catch(e)
{
alert(e);
}
}
JAVASCRIPT;
}
?>
Example usage
Code: Select all
<html>
<head>
<script src = "calendar.php"></script>
</head>
<body>
<input type = "text" id = "test2" onclick = "loadDate('test2');" value = 'Click me!'>
</body>
</html>