养浩然之气,活着不是为技术,请关心身边的人.
一个calendar
上一篇 / 下一篇 2007-08-03 11:15:28 / 个人分类：php
calendar.php
-------------------------------------------------------------
<head>
<link rel="stylesheet" href="./calendar.css" type="text/css">
<scrīpt language="Javascrīpt">
function changePeriod(obj){
period = document.getElementById("period").value;
if(period == "period")
{
document.getElementById("dateTd").innerHTML="Date Range";
}else if(period == "weekly")
{
document.getElementById("dateTd").innerHTML="Week";
}else if(period == "monthly")
{
document.getElementById("dateTd").innerHTML="Month";
}
document.getElementById("periodDiv").style.display="none";
document.getElementById("weeklyDiv").style.display="none";
document.getElementById("monthlyDiv").style.display="none";
//hide the DIV of unselected period - date range
if(period != "period")
{
document.getElementById("periodStart").style.display='none';
document.getElementById("periodEnd").style.display='none';
}
if(period != "weekly")
{
document.getElementById("weeklyDate").style.display='none';
}
if(period != "monthly")
{
document.getElementById("monthlyDate").style.display='none';
}
//show the selected date range
document.getElementById(obj.value+"Div").style.display="block";
}
function changeTime(divId){
period = document.getElementById("period").value;
if(period == "period" && divId != "periodStart")
{
document.odiv = 'periodEnd';
document.getElementById("periodStart").style.display='none';
}else if(period == "period" && divId != "periodEnd")
{
document.odiv = 'periodStart';
document.getElementById("periodEnd").style.display='none';
}else if(period == "weekly")
{
document.odiv = 'weeklyDate';
}else if(period == "monthly")
{
document.odiv = 'monthlyDate';
}
if(document.getElementById(divId).style.display=='none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display='none';
}
}
</scrīpt>
</head>
<?php
/*
* Created on Aug 3, 2007
*
* To change the template for this generated file go to
* Window - Preferences - PHPeclipse - PHP - Code Templates
*/
include_once("JsCalendar.php");
echo js_calendar_scrīpt("search");
print ("<FORM name='search' ACTION='" . $GLOBALS['page'] . "' METHOD='post'>\n");
print ("<TABLE CELLPADDING=3 CELLSPACING=0 BORDER=1 style='margin:10px' frame='hsides'>\n");
print ("<TR>\n");
print ("<TD class='formCell2'>Period</TD>\n");
print ("<TD COLSPAN='3' class='formCellGray'><select id='period' name='period' ōnChange='changePeriod(this);'>\n");
print ("<option value='period'>Period Report\n");
print ("<option value='weekly'>Weekly\n");
print ("<option value='monthly'>Monthly\n");
print ("</select>\n");
print ("</TD></TR>\n");
print ("<TR>\n");
print ("<TD id='dateTd' class='formCell1'>Date Range</TD>\n");
print ("<TD class='formCellGray' colspan='3'>\n");
print ("<div id='periodDiv' style='display:block;'><INPUT TYPE='text' id='startDateP' NAME='startDateP' value='' SIZE=8 readonly ōnblur='update_calendar(this.name, this.value);'><img src='../graphics/calendar.gif' width='16' height='16' align='absmiddle' style='cursor:hand' ōnClick='changeTime(\"periodStart\")'> - <INPUT TYPE='text' id='endDateP' NAME='endDateP' value='' SIZE=8 readonly ōnblur='update_calendar(this.name, this.value);'><img src='../graphics/calendar.gif' width='16' height='16' align='absmiddle' style='cursor:hand' ōnClick='changeTime(\"periodEnd\")'></div>\n");
print ("<div id='weeklyDiv' style='display:none;'><INPUT TYPE='text' id='startDateW' NAME='startDateW' value='' SIZE=8 readonly ōnblur='update_calendar(this.name, this.value);'><img src='../graphics/calendar.gif' width='16' height='16' align='absmiddle' style='cursor:hand' ōnClick='changeTime(\"weeklyDate\")'> - <INPUT TYPE='text' id='endDateW' NAME='endDateW' value='' SIZE=8 readonly ōnblur='update_calendar(this.name, this.value);'/></div>\n");
print ("<div id='monthlyDiv' style='display:none;'><INPUT TYPE='text' id='startDateM' NAME='startDateM' value='' SIZE=8 readonly ōnblur='update_calendar(this.name, this.value);'><img src='../graphics/calendar.gif' width='16' height='16' align='absmiddle' style='cursor:hand' ōnClick='changeTime(\"monthlyDate\")'></div>\n");
//calendars for Period Report
print ("<div id='periodStart' style='display:none'>\n");
echo js_calendar_write('startDateP', time(), true,'periodStart');
print("</div>\n");
print ("<div id='periodEnd' style='display:none' align='right'>\n");
echo js_calendar_write('endDateP', time(), true,'periodEnd');
print("</div>\n");
//calendar for Weekly
print ("<div id='weeklyDate' style='display:none'>\n");
echo js_calendar_write('startDateW', time(), true,'weeklyDate');
print("</div>\n");
//calendar for Monthly
print ("<div id='monthlyDate' style='display:none'>\n");
echo js_calendar_write('startDateM', time(), true,'monthlyDate');
print("</div>\n");
print ("</TD></TR>\n");
print ("</TABLE>\n");
print ("</FORM>\n");
?>
JsCalendar.php
-------------------------------------------------------------
<?php
function js_calendar_scrīpt($form_name = 'search')
{
ob_start();
?>
<scrīpt type="text/javascrīpt">
<!--
var form_name = "<?php echo $form_name; ?>";
var format = 'us'; // eu or us
var days = new Array('Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa');
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
var last_click = new Array();
var current_month = '';
var current_year = '';
var last_date = '';
var ōdiv = '';
function calendar(id, d, highlight, adjusted,outdiv)
{
if (adjusted == undefined)
{
var d = new Date(d * 1000);
}
this.id = id;
//alert(id);
this.highlight = highlight;
this.date_obj = d;
this.write = build_calendar;
this.total_days = total_days;
this.month = d.getMonth();
this.date = d.getDate();
this.day = d.getDay();
this.year = d.getFullYear();
//this.hours = d.getHours();
//this.minutes = d.getMinutes();
//this.seconds = d.getSeconds();
this.date_str = date_str;
if (highlight == false)
{
this.selected_date = '';
}
else
{
this.selected_date = this.year + '' + this.month + '' + this.date;
}
// Set the "selected date"
d.setDate(1);
this.firstDay = d.getDay();
//then reset the date object to the correct date
d.setDate(this.date);
}
// Build the body of the calendar
function build_calendar()
{
var str = '';
// Calendar Heading
str += '<div id="cal' + this.id + '">';
str += '<table class="calendar" cellspacing="0" cellpadding="0" border="0" >';
str += '<tr>';
str += '<td class="calnavleft" ōnClick="change_month(-1, \'' + this.id + '\')"><<<\/td>';
str += '<td colspan="5" class="calheading">' + months[this.month] + ' ' + this.year + '<\/td>';
str += '<td class="calnavright" ōnClick="change_month(1, \'' + this.id + '\')">>><\/td>';
str += '<\/tr>';
// Day Names
str += '<tr>';
for (i = 0; i < 7; i++)
{
str += '<td class="caldayheading">' + days[i] + '<\/td>';
}
str += '<\/tr>';
// Day Cells
str += '<tr>';
selDate = (last_date != '') ? last_date : this.date;
for (j = 0; j < 42; j++)
{
var displayNum = (j - this.firstDay + 1);
if (j < this.firstDay) // leading empty cells
{
str += '<td class="calblanktop"> <\/td>';
}
else if (displayNum == selDate && this.highlight == true) // Selected date
{
str += '<td id="' + this.id +'selected" class="caldayselected" ōnClick="set_date(this,\'' + this.id + '\')">' + displayNum + '<\/td>';
}
else if (displayNum > this.total_days())
{
str += '<td class="calblankbot"> <\/td>'; // trailing empty cells
}
else // Unselected days
{
str += '<td id="" class="caldaycells" ōnClick="set_date(this,\'' + this.id + '\'); return false;" ōnMouseOver="javascrīpt:cell_highlight(this,\'' + displayNum + '\',\'' + this.id + '\');" ōnMouseOut="javascrīpt:cell_reset(this,\'' + displayNum + '\',\'' + this.id + '\');" >' + displayNum + '<\/td>';
}
if (j % 7 == 6)
{
str += '<\/tr><tr>';
}
}
str += '<\/tr>';
str += '<\/table>';
str += '<\/div>';
return str;
}
// Total number of days in a month
function total_days()
{
switch(this.month)
{
case 1: // Check for leap year
if (( this.date_obj.getFullYear() % 4 == 0
&& this.date_obj.getFullYear() % 100 != 0)
|| this.date_obj.getFullYear() % 400 == 0)
return 29;
else
return 28;
case 3:
return 30;
case 5:
return 30;
case 8:
return 30;
case 10:
return 30
default:
return 31;
}
}
// Highlight Cell on Mouseover
function cell_highlight(td, num, cal)
{
cal = eval(cal);
if (last_click[cal.id] != num)
{
td.className = "caldaycellhover";
}
}
// Reset Cell on MouseOut
function cell_reset(td, num, cal)
{
cal = eval(cal);
if (last_click[cal.id] == num)
{
td.className = "caldayselected";
}
else
{
td.className = "caldaycells";
}
}
// Clear Field
function clear_field(id)
{
eval("document." + form_name + "." + id + ".value = ''");
document.getElementById(id + "selected").className = "caldaycells";
document.getElementById(id + "selected").id = "";
cal = eval(id);
cal.selected_date = '';
}
// Set date to specified time
function set_to_time(id, raw)
{
if (document.getElementById(id + "selected"))
{
document.getElementById(id + "selected").className = "caldaycells";
document.getElementById(id + "selected").id = "";
}
document.getElementById('cal' + id).innerHTML = '<div id="tempcal'+id+'"> <'+'/div>';
var nowDate = new Date();
// nowDate.setTime = raw * 1000;
current_month = nowDate.getMonth();
current_year = nowDate.getFullYear();
current_date = nowDate.getDate();
ōldcal = eval(id);
oldcal.selected_date = current_year + '' + current_month + '' + current_date;
cal = new calendar(id, nowDate, true, true);
cal.selected_date = current_year + '' + current_month + '' + current_date;
last_date = cal.date;
document.getElementById('tempcal'+id).innerHTML = cal.write();
insert_date(cal);
}
// Set date to what is in the field
var lastDates = new Array();
function update_calendar(id, dateValue)
{
if (lastDates[id] == dateValue) return;
lastDates[id] = dateValue;
var fieldString = dateValue.replace(/\s+/g, ' ');
while (fieldString.substring(0,1) == ' ')
{
fieldString = fieldString.substring(1, fieldString.length);
}
var dateString = fieldString.split(' ');
var dateParts = dateString[0].split('-')
if (dateParts.length < 3) return;
var newYear = dateParts[0];
var newMonth = dateParts[1];
var newDay = dateParts[2];
if (isNaN(newDay) || newDay < 1 || (newDay.length != 1 && newDay.length != 2)) return;
if (isNaN(newYear) || newYear < 1 || newYear.length != 4) return;
if (isNaN(newMonth) || newMonth < 1 || (newMonth.length != 1 && newMonth.length != 2)) return;
if (newMonth > 12) newMonth = 12;
if (newDay > 28)
{
switch(newMonth - 1)
{
case 1: // Check for leap year
if ((newYear % 4 == 0 && newYear % 100 != 0) || newYear % 400 == 0)
{
if (newDay > 29) newDay = 29;
}
else
{
if (newDay > 28) newDay = 28;
}
case 3:
if (newDay > 30) newDay = 30;
case 5:
if (newDay > 30) newDay = 30;
case 8:
if (newDay > 30) newDay = 30;
case 10:
if (newDay > 30) newDay = 30;
default:
if (newDay > 31) newDay = 31;
}
}
if (document.getElementById(id + "selected"))
{
document.getElementById(id + "selected").className = "caldaycells";
document.getElementById(id + "selected").id = "";
}
document.getElementById('cal' + id).innerHTML = '<div id="tempcal'+id+'"> <'+'/div>';
var nowDate = new Date();
nowDate.setDate(newDay);
nowDate.setMonth(newMonth - 1);
nowDate.setYear(newYear);
nowDate.setHours(12);
current_month = nowDate.getMonth();
current_year = nowDate.getFullYear();
cal = new calendar(id, nowDate, true, true);
document.getElementById('tempcal'+id).innerHTML = cal.write();
}
// Set the date
function set_date(td, cal)
{
cal = eval(cal);
// If the user is clicking a cell that is already
// selected we'll de-select it and clear the form field
if (last_click[cal.id] == td.firstChild.nodeValue)
{
td.className = "caldaycells";
last_click[cal.id] = '';
remove_date(cal);
cal.selected_date = '';
return;
}
// Onward!
if (document.getElementById(cal.id + "selected"))
{
document.getElementById(cal.id + "selected").className = "caldaycells";
document.getElementById(cal.id + "selected").id = "";
}
td.className = "caldayselected";
td.id = cal.id + "selected";
cal.selected_date = cal.date_obj.getFullYear() + '' + cal.date_obj.getMonth() + '' + cal.date;
cal.date_obj.setDate(td.firstChild.nodeValue);
cal = new calendar(cal.id, cal.date_obj, true, true);
cal.selected_date = cal.date_obj.getFullYear() + '' + cal.date_obj.getMonth() + '' + cal.date;
last_date = cal.date;
//cal.date
last_click[cal.id] = cal.date;
// Insert the date into the form
insert_date(cal);
}
// Insert the date into the form field
function insert_date(cal)
{
cal = eval(cal);
fval = eval("document." + form_name + "." + cal.id);
var MinMilli = 1000 * 60;
var HrMilli = MinMilli * 60;
var DyMilli = HrMilli * 24;
period = document.getElementById("period").value;
d = new Date(cal.year,cal.month,cal.date);
t = d.getTime(d);
suplus = cal.day*DyMilli;
d = new Date(t-suplus);
weekF = d.getFullYear() + "-";
weekF += ((d.getMonth() + 1)/10)<1?("0" + (d.getMonth() + 1) + "-"):(d.getMonth() + 1) + "-";
weekF += (d.getDate()/10)<1?("0"+d.getDate()):d.getDate();
suplus = (6-cal.day)*DyMilli
d = new Date(t+suplus);
weekL = d.getFullYear() + "-";
weekL += ((d.getMonth() + 1)/10)<1?("0" + (d.getMonth() + 1) + "-"):(d.getMonth() + 1) + "-";
weekL += (d.getDate()/10)<1?("0"+d.getDate()):d.getDate();
if (fval.value == '')
{
if(period == "period")
{
fval.value = cal.date_str('y');
//this.parent.parent.parent.style.display='none';
}else if (period == "weekly")
{
document.getElementById('startDateW').value=weekF;
document.getElementById('endDateW').value=weekL;
}else if (period == "monthly")
{
time = fval.value.substring(10);
new_date = cal.date_str('n');
fval.value = new_date.substring(0,7);
}
}
else
{
if(period == "period")
{
time = fval.value.substring(10);
new_date = cal.date_str('n');
fval.value = new_date;
//this.parent.parent.parent.style.display='none';
}else if (period == "weekly")
{
document.getElementById('startDateW').value=weekF;
document.getElementById('endDateW').value=weekL;
}else if (period == "monthly")
{
time = fval.value.substring(10);
new_date = cal.date_str('n');
fval.value = new_date.substring(0,7);
}
}
// document.getElementById('greatjob').style.display='none';this.odiv
document.getElementById(document.odiv).style.display='none';
}
// Remove the date from the form field
function remove_date(cal)
{
cal = eval(cal);
period = document.getElementById("period").value;
if(period == "weekly")
{
document.getElementById("endDateW").value = '';
}
fval = eval("document." + form_name + "." + cal.id);
fval.value = '';
}
// Change to a new month
function change_month(mo, cal)
{
cal = eval(cal);
if (current_month != '')
{
cal.date_obj.setMonth(current_month);
cal.date_obj.setYear(current_year);
current_month = '';
current_year = '';
}
var newMonth = cal.date_obj.getMonth() + mo;
var newDate = cal.date_obj.getDate();
if (newMonth == 12)
{
cal.date_obj.setYear(cal.date_obj.getFullYear() + 1)
newMonth = 0;
}
else if (newMonth == -1)
{
cal.date_obj.setYear(cal.date_obj.getFullYear() - 1)
newMonth = 11;
}
if (newDate > 28)
{
var newYear = cal.date_obj.getFullYear();
switch(newMonth)
{
case 1: // Check for leap year
if ((newYear % 4 == 0 && newYear % 100 != 0) || newYear % 400 == 0)
{
if (newDate > 29) newDate = 29;
}
else
{
if (newDate > 28) newDate = 28;
}
case 3:
if (newDate > 30) newDate = 30;
case 5:
if (newDate > 30) newDate = 30;
case 8:
if (newDate > 30) newDate = 30;
case 10:
if (newDate > 30) newDate = 30;
default:
if (newDate > 31) newDate = 31;
}
}
cal.date_obj.setDate(newDate);
cal.date_obj.setMonth(newMonth);
new_mdy = cal.date_obj.getFullYear() + '' + cal.date_obj.getMonth() + '' + cal.date;
highlight = (cal.selected_date == new_mdy) ? true : false;
cal = new calendar(cal.id, cal.date_obj, highlight, true);
document.getElementById('cal' + cal.id).innerHTML = cal.write();
}
// Finalize the date string
function date_str(time)
{
var month = this.month + 1;
if (month < 10)
month = '0' + month;
var day = (this.date < 10) ? '0' + this.date : this.date;
//var minutes = (this.minutes < 10) ? '0' + this.minutes : this.minutes;
if (format == 'us')
{
// var hours = (this.hours > 12) ? this.hours - 12 : this.hours;
//var ampm = (this.hours > 11) ? 'PM' : 'AM'
}
else
{
//var hours = this.hours;
var ampm = '';
}
if (time == 'y')
{
//return this.year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ' ' + ampm;
return this.year + '-' + month + '-' + day;
}
else
{
return this.year + '-' + month + '-' + day;
}
}
//-->
</scrīpt>
<?php
$r = ob_get_contents();
ob_end_clean();
return $r;
}
function js_calendar_write($field_id, $time = '', $highlight = TRUE,$outdiv)
{
if ($time == '')
$time = time();
return
'<scrīpt>
var '.$field_id.' = new calendar("'.$field_id.'", '.$time.', '.(($highlight == TRUE) ? 'true' : 'false').');
document.odiv ="'.$outdiv.'";
document.write('.$field_id.'.write());
</scrīpt>';
}
?>
calendar.css
-------------------------------------------------------------
.calendar {
border: 1px #6975A3 solid;
background-color: transparent;
}
.calheading {
background-color: #7C8BC0;
color: #fff;
font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
font-size: 11px;
font-weight: bold;
text-align: center;
}
.calnavleft {
background-color: #7C8BC0;
font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
font-size: 10px;
font-weight: bold;
color: #fff;
padding: 4px;
cursor: pointer;
}
.calnavright {
background-color: #7C8BC0;
font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
font-size: 10px;
font-weight: bold;
color: #fff;
text-align: right;
padding: 4px;
cursor: pointer;
}
.caldayheading {
background-color: #000;
color: #fff;
font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
font-size: 10px;
text-align: center;
padding: 6px 2px 6px 2px;
}
.caldaycells{
color: #000;
background-color: #D1D7E6;
font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
font-size: 11px;
text-align: center;
padding: 4px;
border: 1px #E0E5F1 solid;
cursor: pointer;
}
.caldaycellhover{
color: #fff;
background-color: #B3BCD4;
font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
font-size: 11px;
text-align: center;
padding: 4px;
border: 1px #B3BCD4 solid;
cursor: pointer;
}
.caldayselected{
background-color: #737FAC;
color: #fff;
font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
font-size: 11px;
font-weight: bold;
text-align: center;
border: 1px #566188 solid;
padding: 3px;
cursor: pointer;
}
.calblanktop {
background-color: #fff;
padding: 4px;
}
.calblankbot {
background-color: #fff;
padding: 4px;
}
-------------------------------------------------------------
<head>
<link rel="stylesheet" href="./calendar.css" type="text/css">
<scrīpt language="Javascrīpt">
function changePeriod(obj){
period = document.getElementById("period").value;
if(period == "period")
{
document.getElementById("dateTd").innerHTML="Date Range";
}else if(period == "weekly")
{
document.getElementById("dateTd").innerHTML="Week";
}else if(period == "monthly")
{
document.getElementById("dateTd").innerHTML="Month";
}
document.getElementById("periodDiv").style.display="none";
document.getElementById("weeklyDiv").style.display="none";
document.getElementById("monthlyDiv").style.display="none";
//hide the DIV of unselected period - date range
if(period != "period")
{
document.getElementById("periodStart").style.display='none';
document.getElementById("periodEnd").style.display='none';
}
if(period != "weekly")
{
document.getElementById("weeklyDate").style.display='none';
}
if(period != "monthly")
{
document.getElementById("monthlyDate").style.display='none';
}
//show the selected date range
document.getElementById(obj.value+"Div").style.display="block";
}
function changeTime(divId){
period = document.getElementById("period").value;
if(period == "period" && divId != "periodStart")
{
document.odiv = 'periodEnd';
document.getElementById("periodStart").style.display='none';
}else if(period == "period" && divId != "periodEnd")
{
document.odiv = 'periodStart';
document.getElementById("periodEnd").style.display='none';
}else if(period == "weekly")
{
document.odiv = 'weeklyDate';
}else if(period == "monthly")
{
document.odiv = 'monthlyDate';
}
if(document.getElementById(divId).style.display=='none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display='none';
}
}
</scrīpt>
</head>
<?php
/*
* Created on Aug 3, 2007
*
* To change the template for this generated file go to
* Window - Preferences - PHPeclipse - PHP - Code Templates
*/
include_once("JsCalendar.php");
echo js_calendar_scrīpt("search");
print ("<FORM name='search' ACTION='" . $GLOBALS['page'] . "' METHOD='post'>\n");
print ("<TABLE CELLPADDING=3 CELLSPACING=0 BORDER=1 style='margin:10px' frame='hsides'>\n");
print ("<TR>\n");
print ("<TD class='formCell2'>Period</TD>\n");
print ("<TD COLSPAN='3' class='formCellGray'><select id='period' name='period' ōnChange='changePeriod(this);'>\n");
print ("<option value='period'>Period Report\n");
print ("<option value='weekly'>Weekly\n");
print ("<option value='monthly'>Monthly\n");
print ("</select>\n");
print ("</TD></TR>\n");
print ("<TR>\n");
print ("<TD id='dateTd' class='formCell1'>Date Range</TD>\n");
print ("<TD class='formCellGray' colspan='3'>\n");
print ("<div id='periodDiv' style='display:block;'><INPUT TYPE='text' id='startDateP' NAME='startDateP' value='' SIZE=8 readonly ōnblur='update_calendar(this.name, this.value);'><img src='../graphics/calendar.gif' width='16' height='16' align='absmiddle' style='cursor:hand' ōnClick='changeTime(\"periodStart\")'> - <INPUT TYPE='text' id='endDateP' NAME='endDateP' value='' SIZE=8 readonly ōnblur='update_calendar(this.name, this.value);'><img src='../graphics/calendar.gif' width='16' height='16' align='absmiddle' style='cursor:hand' ōnClick='changeTime(\"periodEnd\")'></div>\n");
print ("<div id='weeklyDiv' style='display:none;'><INPUT TYPE='text' id='startDateW' NAME='startDateW' value='' SIZE=8 readonly ōnblur='update_calendar(this.name, this.value);'><img src='../graphics/calendar.gif' width='16' height='16' align='absmiddle' style='cursor:hand' ōnClick='changeTime(\"weeklyDate\")'> - <INPUT TYPE='text' id='endDateW' NAME='endDateW' value='' SIZE=8 readonly ōnblur='update_calendar(this.name, this.value);'/></div>\n");
print ("<div id='monthlyDiv' style='display:none;'><INPUT TYPE='text' id='startDateM' NAME='startDateM' value='' SIZE=8 readonly ōnblur='update_calendar(this.name, this.value);'><img src='../graphics/calendar.gif' width='16' height='16' align='absmiddle' style='cursor:hand' ōnClick='changeTime(\"monthlyDate\")'></div>\n");
//calendars for Period Report
print ("<div id='periodStart' style='display:none'>\n");
echo js_calendar_write('startDateP', time(), true,'periodStart');
print("</div>\n");
print ("<div id='periodEnd' style='display:none' align='right'>\n");
echo js_calendar_write('endDateP', time(), true,'periodEnd');
print("</div>\n");
//calendar for Weekly
print ("<div id='weeklyDate' style='display:none'>\n");
echo js_calendar_write('startDateW', time(), true,'weeklyDate');
print("</div>\n");
//calendar for Monthly
print ("<div id='monthlyDate' style='display:none'>\n");
echo js_calendar_write('startDateM', time(), true,'monthlyDate');
print("</div>\n");
print ("</TD></TR>\n");
print ("</TABLE>\n");
print ("</FORM>\n");
?>
JsCalendar.php
-------------------------------------------------------------
<?php
function js_calendar_scrīpt($form_name = 'search')
{
ob_start();
?>
<scrīpt type="text/javascrīpt">
<!--
var form_name = "<?php echo $form_name; ?>";
var format = 'us'; // eu or us
var days = new Array('Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa');
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
var last_click = new Array();
var current_month = '';
var current_year = '';
var last_date = '';
var ōdiv = '';
function calendar(id, d, highlight, adjusted,outdiv)
{
if (adjusted == undefined)
{
var d = new Date(d * 1000);
}
this.id = id;
//alert(id);
this.highlight = highlight;
this.date_obj = d;
this.write = build_calendar;
this.total_days = total_days;
this.month = d.getMonth();
this.date = d.getDate();
this.day = d.getDay();
this.year = d.getFullYear();
//this.hours = d.getHours();
//this.minutes = d.getMinutes();
//this.seconds = d.getSeconds();
this.date_str = date_str;
if (highlight == false)
{
this.selected_date = '';
}
else
{
this.selected_date = this.year + '' + this.month + '' + this.date;
}
// Set the "selected date"
d.setDate(1);
this.firstDay = d.getDay();
//then reset the date object to the correct date
d.setDate(this.date);
}
// Build the body of the calendar
function build_calendar()
{
var str = '';
// Calendar Heading
str += '<div id="cal' + this.id + '">';
str += '<table class="calendar" cellspacing="0" cellpadding="0" border="0" >';
str += '<tr>';
str += '<td class="calnavleft" ōnClick="change_month(-1, \'' + this.id + '\')"><<<\/td>';
str += '<td colspan="5" class="calheading">' + months[this.month] + ' ' + this.year + '<\/td>';
str += '<td class="calnavright" ōnClick="change_month(1, \'' + this.id + '\')">>><\/td>';
str += '<\/tr>';
// Day Names
str += '<tr>';
for (i = 0; i < 7; i++)
{
str += '<td class="caldayheading">' + days[i] + '<\/td>';
}
str += '<\/tr>';
// Day Cells
str += '<tr>';
selDate = (last_date != '') ? last_date : this.date;
for (j = 0; j < 42; j++)
{
var displayNum = (j - this.firstDay + 1);
if (j < this.firstDay) // leading empty cells
{
str += '<td class="calblanktop"> <\/td>';
}
else if (displayNum == selDate && this.highlight == true) // Selected date
{
str += '<td id="' + this.id +'selected" class="caldayselected" ōnClick="set_date(this,\'' + this.id + '\')">' + displayNum + '<\/td>';
}
else if (displayNum > this.total_days())
{
str += '<td class="calblankbot"> <\/td>'; // trailing empty cells
}
else // Unselected days
{
str += '<td id="" class="caldaycells" ōnClick="set_date(this,\'' + this.id + '\'); return false;" ōnMouseOver="javascrīpt:cell_highlight(this,\'' + displayNum + '\',\'' + this.id + '\');" ōnMouseOut="javascrīpt:cell_reset(this,\'' + displayNum + '\',\'' + this.id + '\');" >' + displayNum + '<\/td>';
}
if (j % 7 == 6)
{
str += '<\/tr><tr>';
}
}
str += '<\/tr>';
str += '<\/table>';
str += '<\/div>';
return str;
}
// Total number of days in a month
function total_days()
{
switch(this.month)
{
case 1: // Check for leap year
if (( this.date_obj.getFullYear() % 4 == 0
&& this.date_obj.getFullYear() % 100 != 0)
|| this.date_obj.getFullYear() % 400 == 0)
return 29;
else
return 28;
case 3:
return 30;
case 5:
return 30;
case 8:
return 30;
case 10:
return 30
default:
return 31;
}
}
// Highlight Cell on Mouseover
function cell_highlight(td, num, cal)
{
cal = eval(cal);
if (last_click[cal.id] != num)
{
td.className = "caldaycellhover";
}
}
// Reset Cell on MouseOut
function cell_reset(td, num, cal)
{
cal = eval(cal);
if (last_click[cal.id] == num)
{
td.className = "caldayselected";
}
else
{
td.className = "caldaycells";
}
}
// Clear Field
function clear_field(id)
{
eval("document." + form_name + "." + id + ".value = ''");
document.getElementById(id + "selected").className = "caldaycells";
document.getElementById(id + "selected").id = "";
cal = eval(id);
cal.selected_date = '';
}
// Set date to specified time
function set_to_time(id, raw)
{
if (document.getElementById(id + "selected"))
{
document.getElementById(id + "selected").className = "caldaycells";
document.getElementById(id + "selected").id = "";
}
document.getElementById('cal' + id).innerHTML = '<div id="tempcal'+id+'"> <'+'/div>';
var nowDate = new Date();
// nowDate.setTime = raw * 1000;
current_month = nowDate.getMonth();
current_year = nowDate.getFullYear();
current_date = nowDate.getDate();
ōldcal = eval(id);
oldcal.selected_date = current_year + '' + current_month + '' + current_date;
cal = new calendar(id, nowDate, true, true);
cal.selected_date = current_year + '' + current_month + '' + current_date;
last_date = cal.date;
document.getElementById('tempcal'+id).innerHTML = cal.write();
insert_date(cal);
}
// Set date to what is in the field
var lastDates = new Array();
function update_calendar(id, dateValue)
{
if (lastDates[id] == dateValue) return;
lastDates[id] = dateValue;
var fieldString = dateValue.replace(/\s+/g, ' ');
while (fieldString.substring(0,1) == ' ')
{
fieldString = fieldString.substring(1, fieldString.length);
}
var dateString = fieldString.split(' ');
var dateParts = dateString[0].split('-')
if (dateParts.length < 3) return;
var newYear = dateParts[0];
var newMonth = dateParts[1];
var newDay = dateParts[2];
if (isNaN(newDay) || newDay < 1 || (newDay.length != 1 && newDay.length != 2)) return;
if (isNaN(newYear) || newYear < 1 || newYear.length != 4) return;
if (isNaN(newMonth) || newMonth < 1 || (newMonth.length != 1 && newMonth.length != 2)) return;
if (newMonth > 12) newMonth = 12;
if (newDay > 28)
{
switch(newMonth - 1)
{
case 1: // Check for leap year
if ((newYear % 4 == 0 && newYear % 100 != 0) || newYear % 400 == 0)
{
if (newDay > 29) newDay = 29;
}
else
{
if (newDay > 28) newDay = 28;
}
case 3:
if (newDay > 30) newDay = 30;
case 5:
if (newDay > 30) newDay = 30;
case 8:
if (newDay > 30) newDay = 30;
case 10:
if (newDay > 30) newDay = 30;
default:
if (newDay > 31) newDay = 31;
}
}
if (document.getElementById(id + "selected"))
{
document.getElementById(id + "selected").className = "caldaycells";
document.getElementById(id + "selected").id = "";
}
document.getElementById('cal' + id).innerHTML = '<div id="tempcal'+id+'"> <'+'/div>';
var nowDate = new Date();
nowDate.setDate(newDay);
nowDate.setMonth(newMonth - 1);
nowDate.setYear(newYear);
nowDate.setHours(12);
current_month = nowDate.getMonth();
current_year = nowDate.getFullYear();
cal = new calendar(id, nowDate, true, true);
document.getElementById('tempcal'+id).innerHTML = cal.write();
}
// Set the date
function set_date(td, cal)
{
cal = eval(cal);
// If the user is clicking a cell that is already
// selected we'll de-select it and clear the form field
if (last_click[cal.id] == td.firstChild.nodeValue)
{
td.className = "caldaycells";
last_click[cal.id] = '';
remove_date(cal);
cal.selected_date = '';
return;
}
// Onward!
if (document.getElementById(cal.id + "selected"))
{
document.getElementById(cal.id + "selected").className = "caldaycells";
document.getElementById(cal.id + "selected").id = "";
}
td.className = "caldayselected";
td.id = cal.id + "selected";
cal.selected_date = cal.date_obj.getFullYear() + '' + cal.date_obj.getMonth() + '' + cal.date;
cal.date_obj.setDate(td.firstChild.nodeValue);
cal = new calendar(cal.id, cal.date_obj, true, true);
cal.selected_date = cal.date_obj.getFullYear() + '' + cal.date_obj.getMonth() + '' + cal.date;
last_date = cal.date;
//cal.date
last_click[cal.id] = cal.date;
// Insert the date into the form
insert_date(cal);
}
// Insert the date into the form field
function insert_date(cal)
{
cal = eval(cal);
fval = eval("document." + form_name + "." + cal.id);
var MinMilli = 1000 * 60;
var HrMilli = MinMilli * 60;
var DyMilli = HrMilli * 24;
period = document.getElementById("period").value;
d = new Date(cal.year,cal.month,cal.date);
t = d.getTime(d);
suplus = cal.day*DyMilli;
d = new Date(t-suplus);
weekF = d.getFullYear() + "-";
weekF += ((d.getMonth() + 1)/10)<1?("0" + (d.getMonth() + 1) + "-"):(d.getMonth() + 1) + "-";
weekF += (d.getDate()/10)<1?("0"+d.getDate()):d.getDate();
suplus = (6-cal.day)*DyMilli
d = new Date(t+suplus);
weekL = d.getFullYear() + "-";
weekL += ((d.getMonth() + 1)/10)<1?("0" + (d.getMonth() + 1) + "-"):(d.getMonth() + 1) + "-";
weekL += (d.getDate()/10)<1?("0"+d.getDate()):d.getDate();
if (fval.value == '')
{
if(period == "period")
{
fval.value = cal.date_str('y');
//this.parent.parent.parent.style.display='none';
}else if (period == "weekly")
{
document.getElementById('startDateW').value=weekF;
document.getElementById('endDateW').value=weekL;
}else if (period == "monthly")
{
time = fval.value.substring(10);
new_date = cal.date_str('n');
fval.value = new_date.substring(0,7);
}
}
else
{
if(period == "period")
{
time = fval.value.substring(10);
new_date = cal.date_str('n');
fval.value = new_date;
//this.parent.parent.parent.style.display='none';
}else if (period == "weekly")
{
document.getElementById('startDateW').value=weekF;
document.getElementById('endDateW').value=weekL;
}else if (period == "monthly")
{
time = fval.value.substring(10);
new_date = cal.date_str('n');
fval.value = new_date.substring(0,7);
}
}
// document.getElementById('greatjob').style.display='none';this.odiv
document.getElementById(document.odiv).style.display='none';
}
// Remove the date from the form field
function remove_date(cal)
{
cal = eval(cal);
period = document.getElementById("period").value;
if(period == "weekly")
{
document.getElementById("endDateW").value = '';
}
fval = eval("document." + form_name + "." + cal.id);
fval.value = '';
}
// Change to a new month
function change_month(mo, cal)
{
cal = eval(cal);
if (current_month != '')
{
cal.date_obj.setMonth(current_month);
cal.date_obj.setYear(current_year);
current_month = '';
current_year = '';
}
var newMonth = cal.date_obj.getMonth() + mo;
var newDate = cal.date_obj.getDate();
if (newMonth == 12)
{
cal.date_obj.setYear(cal.date_obj.getFullYear() + 1)
newMonth = 0;
}
else if (newMonth == -1)
{
cal.date_obj.setYear(cal.date_obj.getFullYear() - 1)
newMonth = 11;
}
if (newDate > 28)
{
var newYear = cal.date_obj.getFullYear();
switch(newMonth)
{
case 1: // Check for leap year
if ((newYear % 4 == 0 && newYear % 100 != 0) || newYear % 400 == 0)
{
if (newDate > 29) newDate = 29;
}
else
{
if (newDate > 28) newDate = 28;
}
case 3:
if (newDate > 30) newDate = 30;
case 5:
if (newDate > 30) newDate = 30;
case 8:
if (newDate > 30) newDate = 30;
case 10:
if (newDate > 30) newDate = 30;
default:
if (newDate > 31) newDate = 31;
}
}
cal.date_obj.setDate(newDate);
cal.date_obj.setMonth(newMonth);
new_mdy = cal.date_obj.getFullYear() + '' + cal.date_obj.getMonth() + '' + cal.date;
highlight = (cal.selected_date == new_mdy) ? true : false;
cal = new calendar(cal.id, cal.date_obj, highlight, true);
document.getElementById('cal' + cal.id).innerHTML = cal.write();
}
// Finalize the date string
function date_str(time)
{
var month = this.month + 1;
if (month < 10)
month = '0' + month;
var day = (this.date < 10) ? '0' + this.date : this.date;
//var minutes = (this.minutes < 10) ? '0' + this.minutes : this.minutes;
if (format == 'us')
{
// var hours = (this.hours > 12) ? this.hours - 12 : this.hours;
//var ampm = (this.hours > 11) ? 'PM' : 'AM'
}
else
{
//var hours = this.hours;
var ampm = '';
}
if (time == 'y')
{
//return this.year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ' ' + ampm;
return this.year + '-' + month + '-' + day;
}
else
{
return this.year + '-' + month + '-' + day;
}
}
//-->
</scrīpt>
<?php
$r = ob_get_contents();
ob_end_clean();
return $r;
}
function js_calendar_write($field_id, $time = '', $highlight = TRUE,$outdiv)
{
if ($time == '')
$time = time();
return
'<scrīpt>
var '.$field_id.' = new calendar("'.$field_id.'", '.$time.', '.(($highlight == TRUE) ? 'true' : 'false').');
document.odiv ="'.$outdiv.'";
document.write('.$field_id.'.write());
</scrīpt>';
}
?>
calendar.css
-------------------------------------------------------------
.calendar {
border: 1px #6975A3 solid;
background-color: transparent;
}
.calheading {
background-color: #7C8BC0;
color: #fff;
font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
font-size: 11px;
font-weight: bold;
text-align: center;
}
.calnavleft {
background-color: #7C8BC0;
font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
font-size: 10px;
font-weight: bold;
color: #fff;
padding: 4px;
cursor: pointer;
}
.calnavright {
background-color: #7C8BC0;
font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
font-size: 10px;
font-weight: bold;
color: #fff;
text-align: right;
padding: 4px;
cursor: pointer;
}
.caldayheading {
background-color: #000;
color: #fff;
font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
font-size: 10px;
text-align: center;
padding: 6px 2px 6px 2px;
}
.caldaycells{
color: #000;
background-color: #D1D7E6;
font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
font-size: 11px;
text-align: center;
padding: 4px;
border: 1px #E0E5F1 solid;
cursor: pointer;
}
.caldaycellhover{
color: #fff;
background-color: #B3BCD4;
font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
font-size: 11px;
text-align: center;
padding: 4px;
border: 1px #B3BCD4 solid;
cursor: pointer;
}
.caldayselected{
background-color: #737FAC;
color: #fff;
font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
font-size: 11px;
font-weight: bold;
text-align: center;
border: 1px #566188 solid;
padding: 3px;
cursor: pointer;
}
.calblanktop {
background-color: #fff;
padding: 4px;
}
.calblankbot {
background-color: #fff;
padding: 4px;
}
相关阅读:
- PHP的ob_start() 控制浏览器cache (xiaotian_ls, 2007-8-01)
- CSS鼠标样式大全 (solaris, 2007-8-01)
- CSS样式切换技巧 (solaris, 2007-8-01)
- 斐波那契数列 PHP Implements (dennis, 2007-8-01)
- jason chu (qingis, 2007-8-01)
- access to mysql (hope009, 2007-8-02)
- php url路由的实现 (paged, 2007-8-02)
- php 阻止表单重复提交 (paged, 2007-8-02)
- PHP安全 (Snake.Zero, 2007-8-02)
- OO (linq319, 2007-8-02)
