在許多表單中要輸入日期，通常的做法是給出三個下拉框，然後分別選擇年，月和日。
這裡所講的是，採用一個Text編輯框來放日期，選擇日期功能，則採用彈出一個日曆視窗，在視窗中讓使用者選擇，則Text比較框中自動把日期填上。
下面我們講講怎樣實現它。
在日期選擇的處理上，例子如下：
wnl.htm
<form name="form1" method="post" action="">
<script language="javascript">
function popupCal()
{
var popup = window.open('wnl/wnl.php', 'popupcal', 'width=600,height=200,resizable=1,scrollbars=auto');}
</script>
<input type="text" name="textdate" value="" readonly="true">
<input type="button" name="button" value="選擇日期" onClick="popupCal()">
</form> |
|
在新視窗中開啟的是一個日曆視窗，關於日曆視窗，它主要是要選擇日期的Javascript如下：
<script language="javascript">
function returnDate(varDate)
{ var strDate = "{$yyyy}-{$mm}-";
strDate += varDate;
window.opener.document.form1.textdate.value = strDate;
}
</script> |
|
下面我們給出完整的日曆代碼[PHP代碼]
wnl/wnl.php
<?php
//---------------------------------------------------------------------------
// Filename : wnl.php
// Author : Bai Jianping<hakusan@sohu.com>
// Description : 萬年曆程式的主要邏輯功能實現部分
// Date : 2005-03-18
// Version : 1.0
// Copyright : Chinux Team
//---------------------------------------------------------------------------
// History :
//
// Date Author Modification
//---------------------------------------------------------------------------
// 2005-03-18 Bai Jianping - create file
//---------------------------------------------------------------------------
//---------------------------------------------------------------------------$YYYY_MIN = 1900; // 最小年份
$YYYY_MAX = 2099; // 最大年份
$YYYYMM_MIN = 190001; // 最小月份
$YYYYMM_MAX = 209912; // 最大月份
if (isset($_POST['yyyymm']))
{
// 由下拉選擇框選擇的年月
if ($_POST['yyyymm'] == "SELECTFORMAT")
{
$yyyymm = $_POST['selectyyyy'] * 100 + $_POST['selectmm'];
}
// 由點擊“本月”按鈕選擇的年月
else if ($_POST['yyyymm'] == "THISMONTH")
{
$yyyymm = date("Ym");
}
else
{
// 由點擊“上一月”選擇的年月
if ($_POST['yyyymm'] == "LASTMM")
{
$_POST['yyyymm'] = $_POST['selectyyyy'] * 100 + $_POST['selectmm'] - 1;
}
// 由點擊“下一月”選擇的年月
else if ($_POST['yyyymm'] == "NEXTMM")
{
$_POST['yyyymm'] = $_POST['selectyyyy'] * 100 + $_POST['selectmm'] + 1;
}
// 由點擊“上一年”選擇的年月
else if ($_POST['yyyymm'] == "LASTYYYY")
{
$_POST['yyyymm'] = ($_POST['selectyyyy'] - 1) * 100 + $_POST['selectmm'];
}
// 由點擊“下一年”選擇的年月
else if ($_POST['yyyymm'] == "NEXTYYYY")
{
$_POST['yyyymm'] = ($_POST['selectyyyy'] + 1) * 100 + $_POST['selectmm'];
}
// 限制最小與最大年月
if ($_POST['yyyymm'] < $YYYYMM_MIN)
{
$yyyymm = $YYYYMM_MIN;
}
else if ($_POST['yyyymm'] > $YYYYMM_MAX)
{
$yyyymm = $YYYYMM_MAX;
}
else if ($_POST['yyyymm'] % 100 == 0)
{
$yyyymm = $_POST['yyyymm'] - 100 + 12;
}
else if ($_POST['yyyymm'] % 100 == 13)
{
$yyyymm = $_POST['yyyymm'] + 100 - 12;
}
else
{
$yyyymm = $_POST['yyyymm'];
}
}
}
// 如果是第一次訪問則取當天的日期
else
{
$yyyymm = date("Ym");
}
$yyyy = floor($yyyymm/100); // 要顯示的年份
$mm = $yyyymm % 100; // 要顯示的月份
$dd = date("d"); // 當天日期 // 每月的天數
$days = array(1 => 31, 2 => 28, 3 => 31, 4 => 30, 5 => 31, 6 => 30,
7 => 31, 8 => 31, 9 => 30, 10 => 31, 11 => 30, 12 => 31); // 判斷是否是閏年
if ($yyyy % 400 == 0 || $yyyy % 4 == 0 && $yyyy % 100 != 0)
{
$days[2] = 29;
}
// 判斷所選年月的１號是本年第幾天
for ($i = 1, $d = 1; $i < $mm; $i++)
{
$d += $days[$i];
}
// 取得所選月１號是星期幾
$week = (($yyyy - 1) + floor(($yyyy - 1)/4) - floor(($yyyy - 1)/100) + floor(($yyyy - 1)/400) + $d) % 7;
// 計算顯示本月日曆需要幾行
$alldays = $week + $days[$mm];
if ($alldays % 7 == 0)
{
$rows = floor($alldays/7);
}
else
{
$rows = floor($alldays/7) + 1;
} // 構造顯示月曆數組
$dayarray = array();
for ($i = 0;$i < $week; $i++)
{
$dayarray[] = "";
}
for ($i = 1; $i < $days[$mm] + 1; $i++)
{
$dayarray[] = $i;
}
// 加入模板
require_once("wnl.html")
?> |
|
下面是日曆模板[採用特殊模式的模板]
wnl/wnl.html
<!--
<?php
//---------------------------------------------------------------------------
// Filename : wnl.html
// Author : Bai Jianping<hakusan@sohu.com>
// Description : 萬年曆程式的介面表現模板部分
// Date : 2005-03-18
// Version : 1.0
// Copyright : Chinux Team
//---------------------------------------------------------------------------
// History :
//
// Date Author Modification
//---------------------------------------------------------------------------
// 2005-03-18 Bai Jianping - create file
//---------------------------------------------------------------------------
//---------------------------------------------------------------------------$headtitle = "我的萬年曆";
$labellastyear = "上一年";
$labelnextyear = "下一年";
$labellastmonth = "上一月";
$labelnextmonth = "下一月";
$labelyear = "年";
$labelmonth = "月";
$labelthismonth = "本 月";
$labelsunday = "日";
$labelmonday = "一";
$labeltuesday = "二";
$labelwednesday = "三";
$labelthursday = "四";
$labelfriday = "五";
$labelsaturday = "六"; print <<<EOT
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>{$headtitle}</title>
<style type='text/css'>
a { text-decoration: none; color: #003366 }
a:hover { text-decoration: underline }
body { scrollbar-base-color: #F1F9FE; scrollbar-arrow-color: #5AA8DA; font: 12px Tahoma, Verdana; background-color: #1A60A8;MARGIN: 0; }
table { font: 12px Tahoma, Verdana; color: #333333; border-width:1px; border-style:solid; border-color:#6699FF }
td {FONT-SIZE: 12px; border-collapse:separate; border-width:1px; border-style:solid; border-color:#FFCCFF; text-align:center}
input,textarea { font: 11px Tahoma, Verdana; color: #333333; font-weight: normal; background-color: #F1F9FE ;
border-width:1px; border-style:solid; border-color:#66CCFF}
select { border-width:1px; border-style:solid;border-color:#66CCFF;font: 11px Arial, Tahoma; color: #333333; font-weight: normal; background-color: #F1F9FE }
div.quote{
margin:5px 20px;border:1px solid #CCCCCC;padding:5px;background:#F3F3F3 ;line-height : normal;
}
img {border:0;}
</style>
<script language="javascript">
function returnDate(varDate)
{ var strDate = "{$yyyy}-{$mm}-";
strDate += varDate;
window.opener.document.form1.textdate.value = strDate;
}
</script>
</head> <body bgcolor="#000000">
<form name="form1" method="post" action="wnl.php">
<input name="yyyymm" type="hidden" value="">
<table width="530" border="0" align="center" bgcolor="#6699FF">
<tr bgcolor="#FFFFFF">
<td colspan="7">{$headtitle}</td>
</tr>
<tr bgcolor="#FFCCFF">
<td><input name="year" type="button" value="{$labellastyear}" onClick="javascript:yyyymm.value='LASTYYYY';submit()"></td>
<td><input name="year" type="button" value="{$labellastmonth}" onClick="javascript:yyyymm.value='LASTMM';submit()"></td>
<td colspan="3">
<select name="selectyyyy" onChange="javascript:yyyymm.value='SELECTFORMAT';submit()">
<!--
EOT;
// 輸出可選的年份
for($i = $YYYY_MIN; $i < $YYYY_MAX + 1; $i++)
{
if ($i == $yyyy)
{
print <<<EOT
-->
<option value="{$i}" selected>{$i}</option>
<!--
EOT;
}
else
{
print <<<EOT
-->
<option value="{$i}">{$i}</option>
<!--
EOT;
}
}
print <<<EOT
-->
</select>
{$labelyear}
<select name="selectmm" onChange="javascript:yyyymm.value='SELECTFORMAT';submit()">
<!--
EOT;
// 輸出可選的月份
for($i = 1; $i < 13; $i++)
{
if ($i == $mm)
{
print <<<EOT
-->
<option value="{$i}" selected>{$i}</option>
<!--
EOT;
}
else
{
print <<<EOT
-->
<option value="{$i}">{$i}</option>
<!--
EOT;
}
}
print <<<EOT
-->
</select>
{$labelmonth}
</td>
<td><input type="button" name="Submit" value="{$labelnextmonth}" onClick="javascript:yyyymm.value='NEXTMM';submit()"></td>
<td><input type="button" name="Submit" value="{$labelnextyear}" onClick="javascript:yyyymm.value='NEXTYYYY';submit()"></td>
</tr>
<tr bgcolor="#CCCCFF">
<td>{$labelsunday}</td>
<td>{$labelmonday}</td>
<td>{$labeltuesday}</td>
<td>{$labelwednesday}</td>
<td>{$labelthursday}</td>
<td>{$labelfriday}</td>
<td>{$labelsaturday}</td>
</tr>
<!--
EOT; $idx = 0; // 如果要顯示的月份是本月的話，當天的日期要著重顯示
if ($yyyy == date("Y") && $mm == date("m"))
{
// $dayarray[$week - 1 + $dd] = "<b><font color=/"#0000FF/">" . $dayarray[$week - 1 + $dd] . "</font></b>";
}
// 顯示月曆
for ($i = 0; $i < $rows; $i++)
{
print <<<EOT
-->
<tr bgcolor="#FFFFCC">
<!--
EOT;
// 顯示周曆
for ($j = 0; $j < 7; $j++)
{
print <<<EOT
-->
<td {$bgcolor} > <a href="javascript:returnDate({$dayarray[$idx]})">{$dayarray[$idx]}</a> </td>
<!--
EOT;
$idx++;
}
print <<<EOT
-->
</tr>
<!--
EOT;
}
// 顯示當日日期
$today = date("D, j M Y T");
print <<<EOT
-->
<tr bgcolor="#CCCCFF">
<td colspan="6">{$today}</td>
<td><input name="today" type="button" value="{$labelthismonth}" onClick="javascript:yyyymm.value='THISMONTH';submit();"></td>
</tr>
</table>
</form>
</body>
</html>
<!--
EOT;
?>
--> |
|
